diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index c3cc97d8c..eddaffd94 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,9 +1,7 @@
 ---
-name: Bug report
-about: Thanks for helping us improve Peregrine CMS!
+name: Bug report about: Thanks for helping us improve Peregrine CMS!
 title: ''
-labels: bug
-assignees: ''
+labels: bug assignees: ''
 
 ---
 
@@ -12,6 +10,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,9 +23,10 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
- - OS: [e.g. iOS]
+
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+- OS: [e.g. iOS]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index bb8068335..8b298ec18 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,9 +1,7 @@
 ---
-name: Feature request
-about: Thanks for helping us improve Peregrine CMS!
+name: Feature request about: Thanks for helping us improve Peregrine CMS!
 title: ''
-labels: enhancement
-assignees: ''
+labels: enhancement assignees: ''
 
 ---
 
diff --git a/core/pom.xml b/core/pom.xml
index 295b689f8..48a0b178c 100644
--- a/core/pom.xml
+++ b/core/pom.xml
@@ -17,7 +17,8 @@
     specific language governing permissions and limitations
     under the License.
 -->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 
     <modelVersion>4.0.0</modelVersion>
 
diff --git a/core/src/main/java/com/themecleanflex/models/AccordionModel.java b/core/src/main/java/com/themecleanflex/models/AccordionModel.java
index f1154e602..fded32ff0 100644
--- a/core/src/main/java/com/themecleanflex/models/AccordionModel.java
+++ b/core/src/main/java/com/themecleanflex/models/AccordionModel.java
@@ -1,9 +1,8 @@
 package com.themecleanflex.models;
 
+import com.peregrine.model.api.ImageInfo;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
@@ -11,9 +10,8 @@
 import org.apache.sling.models.annotations.Model;
 
 import javax.inject.Inject;
-
-import com.peregrine.model.api.ImageInfo;
 import java.awt.Dimension;
+import java.util.List;
 
 /*
     //GEN[:DATA
@@ -492,359 +490,361 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/accordion",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/accordion",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class AccordionModel extends AbstractComponent {
 
-    public AccordionModel(Resource r) { super(r); }
+    public AccordionModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Collapse Style","x-form-group":"style","x-form-type":"materialradio","x-default":"accordion","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
-	@Inject
-	@Default(values ="accordion")
-	private String toggletype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String title;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showmedia;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String mediatype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	@Inject
-	@Default(values ="")
-	private String imagesrc;
-
-	@Inject
-	@ImageInfo(name="imagesrc")
-	private Dimension imagesrcSize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	@Inject
-	@Default(values ="")
-	private String videosrc;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	@Inject
-	private String mediatitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	@Inject
-	@Default(values ="50")
-	private String mediawidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	@Inject
-	@Default(values ="before")
-	private String mediaposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	@Inject
-	@Default(values ="true")
-	private String cardborder;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-group":"style","x-form-type":"materialselect","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"},"full":{"x-form-name":"full","x-form-value":"full"}}} */
-	@Inject
-	@Default(values ="none")
-	private String roundedcorners;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Accordion/Toggle","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
-	@Inject
-	private List<IComponent> accordiontoggle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Collapse Style","x-form-group":"style","x-form-type":"materialradio","x-default":"accordion","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
+    @Inject
+    @Default(values = "accordion")
+    private String toggletype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String title;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showmedia;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String mediatype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    @Inject
+    @Default(values = "")
+    private String imagesrc;
+
+    @Inject
+    @ImageInfo(name = "imagesrc")
+    private Dimension imagesrcSize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    @Inject
+    @Default(values = "")
+    private String videosrc;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    @Inject
+    private String mediatitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    @Inject
+    @Default(values = "50")
+    private String mediawidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    @Inject
+    @Default(values = "before")
+    private String mediaposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    @Inject
+    @Default(values = "true")
+    private String cardborder;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-group":"style","x-form-type":"materialselect","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"},"full":{"x-form-name":"full","x-form-value":"full"}}} */
+    @Inject
+    @Default(values = "none")
+    private String roundedcorners;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Accordion/Toggle","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
+    @Inject
+    private List<IComponent> accordiontoggle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Collapse Style","x-form-group":"style","x-form-type":"materialradio","x-default":"accordion","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
-	public String getToggletype() {
-		return toggletype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowtitle() {
-		return showtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
-	public String getTitle() {
-		return title;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowmedia() {
-		return showmedia;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getMediatype() {
-		return mediatype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	public String getImagesrc() {
-		return imagesrc;
-	}
-
-	public Dimension getImagesrcSize() {
-		return imagesrcSize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	public String getVideosrc() {
-		return videosrc;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	public String getMediatitle() {
-		return mediatitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	public String getMediawidth() {
-		return mediawidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	public String getMediaposition() {
-		return mediaposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	public String getCardborder() {
-		return cardborder;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-group":"style","x-form-type":"materialselect","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"},"full":{"x-form-name":"full","x-form-value":"full"}}} */
-	public String getRoundedcorners() {
-		return roundedcorners;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Accordion/Toggle","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
-	public List<IComponent> getAccordiontoggle() {
-		return accordiontoggle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Collapse Style","x-form-group":"style","x-form-type":"materialradio","x-default":"accordion","properties":{"toggle":{"x-form-name":"Toggle","x-form-value":"toggle"},"accordion":{"x-form-name":"Accordion","x-form-value":"accordion"}}} */
+    public String getToggletype() {
+        return toggletype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowtitle() {
+        return showtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
+    public String getTitle() {
+        return title;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowmedia() {
+        return showmedia;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getMediatype() {
+        return mediatype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    public String getImagesrc() {
+        return imagesrc;
+    }
+
+    public Dimension getImagesrcSize() {
+        return imagesrcSize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    public String getVideosrc() {
+        return videosrc;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    public String getMediatitle() {
+        return mediatitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    public String getMediawidth() {
+        return mediawidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    public String getMediaposition() {
+        return mediaposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    public String getCardborder() {
+        return cardborder;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-group":"style","x-form-type":"materialselect","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"},"full":{"x-form-name":"full","x-form-value":"full"}}} */
+    public String getRoundedcorners() {
+        return roundedcorners;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Accordion/Toggle","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
+    public List<IComponent> getAccordiontoggle() {
+        return accordiontoggle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/BlockModel.java b/core/src/main/java/com/themecleanflex/models/BlockModel.java
index 3c2e148a7..477b4f7a3 100644
--- a/core/src/main/java/com/themecleanflex/models/BlockModel.java
+++ b/core/src/main/java/com/themecleanflex/models/BlockModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -291,227 +292,229 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/block",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/block",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class BlockModel extends AbstractComponent {
 
-    public BlockModel(Resource r) { super(r); }
+    public BlockModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/BreadcrumbModel.java b/core/src/main/java/com/themecleanflex/models/BreadcrumbModel.java
index 6f41519f3..49dd9fc88 100644
--- a/core/src/main/java/com/themecleanflex/models/BreadcrumbModel.java
+++ b/core/src/main/java/com/themecleanflex/models/BreadcrumbModel.java
@@ -2,9 +2,6 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.ArrayList;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.api.resource.ResourceResolver;
 import org.apache.sling.api.resource.ValueMap;
@@ -15,6 +12,10 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import javax.inject.Inject;
+import java.util.ArrayList;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -350,328 +351,331 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/breadcrumb",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/breadcrumb",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class BreadcrumbModel extends AbstractComponent {
-  
-	public BreadcrumbModel(Resource r) { super(r); }
+
+    public BreadcrumbModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Number Of Levels","x-form-group":"content","x-form-type":"number"} */
-	@Inject
-	private String level;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="primary")
-	private String linkcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Number Of Levels","x-form-group":"content","x-form-type":"number"} */
+    @Inject
+    private String level;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "primary")
+    private String linkcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Number Of Levels","x-form-group":"content","x-form-type":"number"} */
-	public String getLevel() {
-		return level;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getLinkcolor() {
-		return linkcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Number Of Levels","x-form-group":"content","x-form-type":"number"} */
+    public String getLevel() {
+        return level;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getLinkcolor() {
+        return linkcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
 
     //GEN[:CUSTOMGETTERS
     //GEN]
-	private static final Logger LOG = LoggerFactory.getLogger(BreadcrumbModel.class);
-	
-	public List<TextLink> links;
-	
-	/* Method to recursively get child page links, given a root page path */
-    public List<TextLink> getLinks(){
-      
-    	links = new ArrayList<TextLink>();
-    	if(Integer.parseInt(getLevel()) > 0) {
-        Resource page = getRootResource();
-        LOG.debug("page: {}", page);
-    		return getDeepLinks(page != null ? page : getResource());
-    	} else {
-    		return null;
-    	}
-    	
+    private static final Logger LOG = LoggerFactory.getLogger(BreadcrumbModel.class);
+
+    public List<TextLink> links;
+
+    /* Method to recursively get child page links, given a root page path */
+    public List<TextLink> getLinks() {
+
+        links = new ArrayList<TextLink>();
+        if (Integer.parseInt(getLevel()) > 0) {
+            Resource page = getRootResource();
+            LOG.debug("page: {}", page);
+            return getDeepLinks(page != null ? page : getResource());
+        } else {
+            return null;
+        }
+
     }
-    
+
     private List<TextLink> getDeepLinks(Resource resource) {
-		try {
-			ValueMap props = resource.getValueMap();
-			String resourceType = props.get("jcr:primaryType", "type not found");
-			// we only care about per:page child
-			if (resourceType.equals("per:Page")) {
-				Resource index = resource.getChild("index");
-				if (index == null) {
-					index = resource;
-				}
-
-				final String path = index.getPath();
-				TextLink link = new TextLink(path, getPageTitle(path));
-				links.add(0, link);
-			}
-			// move on to its parent resource
-			final Resource parent = resource.getParent();
-			if (parent != null && links.size() < Integer.parseInt(getLevel())) {
-				getDeepLinks(parent);
-			}
-		} catch (Exception e) {
-			LOG.error("getDeepLinks error: {}", e);
-		}
-
-		if (links.size() >= 2 && links.get(0).getLink().equals(links.get(1).getLink())) {
-			links.remove(0);
-		}
-		return links;
-	}
-    	
-	private String getPageTitle(String pageUrl){
-		try{
-			String resourcePath = pageUrl + "/jcr:content";
-			ResourceResolver resourceResolver = getResource().getResourceResolver();
-			ValueMap props = resourceResolver.getResource(resourcePath).adaptTo(ValueMap.class);
-			return props.get("jcr:title", "title not found");
-		} catch(Exception e){
-			LOG.error("getPageTitle error: {}",e);
-			return "title not found....";
-		}
-	}
-    
-	private class TextLink {
-		
-		public TextLink(String link, String text){
-			this.link = link;
-			this.text = text;
-		}
-		private String link;
-		private String text;
-		
-		public String getLink(){
-			return link;
-		}
-		
-		public String getText(){
-			return text;
-		}
-	}
+        try {
+            ValueMap props = resource.getValueMap();
+            String resourceType = props.get("jcr:primaryType", "type not found");
+            // we only care about per:page child
+            if (resourceType.equals("per:Page")) {
+                Resource index = resource.getChild("index");
+                if (index == null) {
+                    index = resource;
+                }
+
+                final String path = index.getPath();
+                TextLink link = new TextLink(path, getPageTitle(path));
+                links.add(0, link);
+            }
+            // move on to its parent resource
+            final Resource parent = resource.getParent();
+            if (parent != null && links.size() < Integer.parseInt(getLevel())) {
+                getDeepLinks(parent);
+            }
+        } catch (Exception e) {
+            LOG.error("getDeepLinks error: {}", e);
+        }
+
+        if (links.size() >= 2 && links.get(0).getLink().equals(links.get(1).getLink())) {
+            links.remove(0);
+        }
+        return links;
+    }
+
+    private String getPageTitle(String pageUrl) {
+        try {
+            String resourcePath = pageUrl + "/jcr:content";
+            ResourceResolver resourceResolver = getResource().getResourceResolver();
+            ValueMap props = resourceResolver.getResource(resourcePath).adaptTo(ValueMap.class);
+            return props.get("jcr:title", "title not found");
+        } catch (Exception e) {
+            LOG.error("getPageTitle error: {}", e);
+            return "title not found....";
+        }
+    }
+
+    private class TextLink {
+
+        public TextLink(String link, String text) {
+            this.link = link;
+            this.text = text;
+        }
+
+        private String link;
+        private String text;
+
+        public String getLink() {
+            return link;
+        }
+
+        public String getText() {
+            return text;
+        }
+    }
 
 }
diff --git a/core/src/main/java/com/themecleanflex/models/CardModel.java b/core/src/main/java/com/themecleanflex/models/CardModel.java
index e53896437..cee5271c0 100644
--- a/core/src/main/java/com/themecleanflex/models/CardModel.java
+++ b/core/src/main/java/com/themecleanflex/models/CardModel.java
@@ -1,5 +1,6 @@
 package com.themecleanflex.models;
 
+import com.peregrine.model.api.ImageInfo;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
 import org.apache.sling.api.resource.Resource;
@@ -9,8 +10,6 @@
 import org.apache.sling.models.annotations.Model;
 
 import javax.inject.Inject;
-
-import com.peregrine.model.api.ImageInfo;
 import java.awt.Dimension;
 
 
@@ -168,127 +167,129 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/cards/cards",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/cards/cards",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class CardModel extends AbstractComponent {
 
-    public CardModel(final Resource r) { super(r); }
+    public CardModel(final Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
-	@Inject
-	private String title;
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
+    @Inject
+    private String title;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"} */
-	@Inject
-	private String text;
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"} */
+    @Inject
+    private String text;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"} */
-	@Inject
-	private String image;
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"} */
+    @Inject
+    private String image;
 
-	@Inject
-	@ImageInfo(name="image")
-	private Dimension imageSize;
+    @Inject
+    @ImageInfo(name = "image")
+    private Dimension imageSize;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"} */
-	@Inject
-	@Default(values ="100")
-	private String imagewidth;
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"} */
+    @Inject
+    @Default(values = "100")
+    private String imagewidth;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"} */
-	@Inject
-	private String imagealttext;
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"} */
+    @Inject
+    private String imagealttext;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"} */
-	@Inject
-	private String buttontext;
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"} */
+    @Inject
+    private String buttontext;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String buttonlink;
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String buttonlink;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}} */
-	@Inject
-	@Default(values ="primary")
-	private String buttoncolor;
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}} */
+    @Inject
+    @Default(values = "primary")
+    private String buttoncolor;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	@Inject
-	@Default(values ="default")
-	private String buttonsize;
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    @Inject
+    @Default(values = "default")
+    private String buttonsize;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
-	@Inject
-	@Default(values ="center")
-	private String buttonalign;
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
+    @Inject
+    @Default(values = "center")
+    private String buttonalign;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
-	public String getTitle() {
-		return title;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"} */
-	public String getImage() {
-		return image;
-	}
-
-	public Dimension getImageSize() {
-		return imageSize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"} */
-	public String getImagewidth() {
-		return imagewidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"} */
-	public String getImagealttext() {
-		return imagealttext;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"} */
-	public String getButtontext() {
-		return buttontext;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getButtonlink() {
-		return buttonlink;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}} */
-	public String getButtoncolor() {
-		return buttoncolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	public String getButtonsize() {
-		return buttonsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
-	public String getButtonalign() {
-		return buttonalign;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
+    public String getTitle() {
+        return title;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"} */
+    public String getImage() {
+        return image;
+    }
+
+    public Dimension getImageSize() {
+        return imageSize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"} */
+    public String getImagewidth() {
+        return imagewidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"} */
+    public String getImagealttext() {
+        return imagealttext;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"} */
+    public String getButtontext() {
+        return buttontext;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getButtonlink() {
+        return buttonlink;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}} */
+    public String getButtoncolor() {
+        return buttoncolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    public String getButtonsize() {
+        return buttonsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
+    public String getButtonalign() {
+        return buttonalign;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/CardsModel.java b/core/src/main/java/com/themecleanflex/models/CardsModel.java
index fdd1098fe..1990abd2a 100644
--- a/core/src/main/java/com/themecleanflex/models/CardsModel.java
+++ b/core/src/main/java/com/themecleanflex/models/CardsModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -551,341 +552,343 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/cards",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/cards",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class CardsModel extends AbstractComponent {
 
-    public CardsModel(Resource r) { super(r); }
+    public CardsModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Text","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtext;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Button","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showbutton;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Background","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showcard;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Card Color","x-form-visible":"model.showcard == 'true'","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String customcardcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Card Color","x-form-type":"color","x-form-visible":"model.showcard == 'true' and model.customcardcolor == 'true'","x-form-group":"style","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String cardcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-type":"materialswitch","x-form-group":"style","x-default":"true"} */
-	@Inject
-	@Default(values ="true")
-	private String cardborder;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-type":"materialselect","x-form-group":"style","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"}}} */
-	@Inject
-	@Default(values ="none")
-	private String roundedcorners;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row","x-form-type":"materialrange","x-form-group":"style","x-default":4,"x-form-min":1,"x-form-max":6} */
-	@Inject
-	@Default(values ="4")
-	private String cardsperrow;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Tablet)","x-form-type":"materialrange","x-form-group":"style","x-default":2,"x-form-min":1,"x-form-max":6} */
-	@Inject
-	@Default(values ="2")
-	private String cardsperrowtab;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Mobile)","x-form-type":"materialrange","x-form-group":"style","x-default":1,"x-form-min":1,"x-form-max":6} */
-	@Inject
-	@Default(values ="1")
-	private String cardsperrowmobile;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards","x-form-fieldLabel":"title","x-form-group":"content","x-form-type":"collection","x-collection-type":"Card","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"},"image":{"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"},"imagewidth":{"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"},"imagealttext":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"},"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}},"buttonsize":{"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}},"buttonalign":{"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}}}} */
-	@Inject
-	private List<CardModel> cards;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Text","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtext;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Button","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showbutton;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Background","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showcard;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Card Color","x-form-visible":"model.showcard == 'true'","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String customcardcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Color","x-form-type":"color","x-form-visible":"model.showcard == 'true' and model.customcardcolor == 'true'","x-form-group":"style","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String cardcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-type":"materialswitch","x-form-group":"style","x-default":"true"} */
+    @Inject
+    @Default(values = "true")
+    private String cardborder;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-type":"materialselect","x-form-group":"style","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"}}} */
+    @Inject
+    @Default(values = "none")
+    private String roundedcorners;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row","x-form-type":"materialrange","x-form-group":"style","x-default":4,"x-form-min":1,"x-form-max":6} */
+    @Inject
+    @Default(values = "4")
+    private String cardsperrow;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Tablet)","x-form-type":"materialrange","x-form-group":"style","x-default":2,"x-form-min":1,"x-form-max":6} */
+    @Inject
+    @Default(values = "2")
+    private String cardsperrowtab;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Mobile)","x-form-type":"materialrange","x-form-group":"style","x-default":1,"x-form-min":1,"x-form-max":6} */
+    @Inject
+    @Default(values = "1")
+    private String cardsperrowmobile;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards","x-form-fieldLabel":"title","x-form-group":"content","x-form-type":"collection","x-collection-type":"Card","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"},"image":{"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"},"imagewidth":{"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"},"imagealttext":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"},"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}},"buttonsize":{"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}},"buttonalign":{"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}}}} */
+    @Inject
+    private List<CardModel> cards;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowtitle() {
-		return showtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Text","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowtext() {
-		return showtext;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Button","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowbutton() {
-		return showbutton;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Background","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowcard() {
-		return showcard;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Card Color","x-form-visible":"model.showcard == 'true'","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getCustomcardcolor() {
-		return customcardcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Card Color","x-form-type":"color","x-form-visible":"model.showcard == 'true' and model.customcardcolor == 'true'","x-form-group":"style","x-default":"#ffffff"} */
-	public String getCardcolor() {
-		return cardcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-type":"materialswitch","x-form-group":"style","x-default":"true"} */
-	public String getCardborder() {
-		return cardborder;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-type":"materialselect","x-form-group":"style","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"}}} */
-	public String getRoundedcorners() {
-		return roundedcorners;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row","x-form-type":"materialrange","x-form-group":"style","x-default":4,"x-form-min":1,"x-form-max":6} */
-	public String getCardsperrow() {
-		return cardsperrow;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Tablet)","x-form-type":"materialrange","x-form-group":"style","x-default":2,"x-form-min":1,"x-form-max":6} */
-	public String getCardsperrowtab() {
-		return cardsperrowtab;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Mobile)","x-form-type":"materialrange","x-form-group":"style","x-default":1,"x-form-min":1,"x-form-max":6} */
-	public String getCardsperrowmobile() {
-		return cardsperrowmobile;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Cards","x-form-fieldLabel":"title","x-form-group":"content","x-form-type":"collection","x-collection-type":"Card","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"},"image":{"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"},"imagewidth":{"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"},"imagealttext":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"},"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}},"buttonsize":{"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}},"buttonalign":{"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}}}} */
-	public List<CardModel> getCards() {
-		return cards;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowtitle() {
+        return showtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Text","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowtext() {
+        return showtext;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Button","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowbutton() {
+        return showbutton;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Background","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowcard() {
+        return showcard;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Card Color","x-form-visible":"model.showcard == 'true'","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getCustomcardcolor() {
+        return customcardcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Card Color","x-form-type":"color","x-form-visible":"model.showcard == 'true' and model.customcardcolor == 'true'","x-form-group":"style","x-default":"#ffffff"} */
+    public String getCardcolor() {
+        return cardcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Card Border","x-form-type":"materialswitch","x-form-group":"style","x-default":"true"} */
+    public String getCardborder() {
+        return cardborder;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Rounded Corners","x-form-type":"materialselect","x-form-group":"style","x-default":"none","properties":{"none":{"x-form-name":"none","x-form-value":"none"},"small":{"x-form-name":"small","x-form-value":"small"},"medium":{"x-form-name":"medium","x-form-value":"medium"},"large":{"x-form-name":"large","x-form-value":"large"}}} */
+    public String getRoundedcorners() {
+        return roundedcorners;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row","x-form-type":"materialrange","x-form-group":"style","x-default":4,"x-form-min":1,"x-form-max":6} */
+    public String getCardsperrow() {
+        return cardsperrow;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Tablet)","x-form-type":"materialrange","x-form-group":"style","x-default":2,"x-form-min":1,"x-form-max":6} */
+    public String getCardsperrowtab() {
+        return cardsperrowtab;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards Per Row (Mobile)","x-form-type":"materialrange","x-form-group":"style","x-default":1,"x-form-min":1,"x-form-max":6} */
+    public String getCardsperrowmobile() {
+        return cardsperrowmobile;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Cards","x-form-fieldLabel":"title","x-form-group":"content","x-form-type":"collection","x-collection-type":"Card","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Card Title","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Card Text","x-form-visible":"model.showtext == 'true'","x-form-type":"texteditor"},"image":{"type":"string","x-source":"inject","x-form-label":"Card Image","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-annotate":"size"},"imagewidth":{"type":"string","x-source":"inject","x-form-label":"Image Width","x-form-type":"materialrange","x-default":"100","x-form-min":"10","x-form-max":"100"},"imagealttext":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"},"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-visible":"model.showbutton == 'true'","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-visible":"model.showbutton == 'true'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"}}},"buttonsize":{"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}},"buttonalign":{"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-type":"materialselect","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}}}} */
+    public List<CardModel> getCards() {
+        return cards;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/CarouselModel.java b/core/src/main/java/com/themecleanflex/models/CarouselModel.java
index b832ebc86..9d3706d7c 100644
--- a/core/src/main/java/com/themecleanflex/models/CarouselModel.java
+++ b/core/src/main/java/com/themecleanflex/models/CarouselModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -433,324 +434,326 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/carousel",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/carousel",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class CarouselModel extends AbstractComponent {
 
-    public CarouselModel(Resource r) { super(r); }
+    public CarouselModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Carousel Height","x-form-type":"materialrange","x-form-group":"style","x-default":80,"x-form-min":10,"x-form-max":100} */
-	@Inject
-	@Default(values ="80")
-	private String carouselheight;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Auto Play","x-form-type":"materialswitch"} */
-	@Inject
-	private String autoplay;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Images per page","x-form-type":"number","x-default":1} */
-	@Inject
-	@Default(values ="1")
-	private String itemsperpage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Interval","x-form-type":"materialrange","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":5,"x-form-min":1,"x-form-max":20} */
-	@Inject
-	@Default(values ="5")
-	private String interval;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Pause On Hover","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String pause;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Wrap","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	@Inject
-	@Default(values ="true")
-	private String wrap;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Indicators","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	@Inject
-	@Default(values ="true")
-	private String indicators;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Controls","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	@Inject
-	@Default(values ="true")
-	private String controls;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Caption Background","x-form-type":"materialswitch"} */
-	@Inject
-	private String captionbg;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Slides","x-form-fieldLabel":"heading","x-form-group":"content","x-form-type":"collection","properties":{"imagepath":{"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"},"imagefit":{"type":"string","x-source":"inject","x-form-label":"Slide Image Fit","x-form-type":"materialradio","x-default":"cover","properties":{"toggle":{"x-form-name":"Contain","x-form-value":"contain"},"accordion":{"x-form-name":"Cover","x-form-value":"cover"}}},"slidelink":{"type":"string","x-source":"inject","x-form-label":"Slide Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"text":{"type":"string","x-source":"inject","x-form-label":"Image Text","x-form-type":"texteditor"},"alt":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"}}} */
-	@Inject
-	private List<IComponent> slides;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Carousel Height","x-form-type":"materialrange","x-form-group":"style","x-default":80,"x-form-min":10,"x-form-max":100} */
+    @Inject
+    @Default(values = "80")
+    private String carouselheight;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Auto Play","x-form-type":"materialswitch"} */
+    @Inject
+    private String autoplay;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Images per page","x-form-type":"number","x-default":1} */
+    @Inject
+    @Default(values = "1")
+    private String itemsperpage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Interval","x-form-type":"materialrange","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":5,"x-form-min":1,"x-form-max":20} */
+    @Inject
+    @Default(values = "5")
+    private String interval;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Pause On Hover","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String pause;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Wrap","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    @Inject
+    @Default(values = "true")
+    private String wrap;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Indicators","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    @Inject
+    @Default(values = "true")
+    private String indicators;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Controls","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    @Inject
+    @Default(values = "true")
+    private String controls;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Caption Background","x-form-type":"materialswitch"} */
+    @Inject
+    private String captionbg;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Slides","x-form-fieldLabel":"heading","x-form-group":"content","x-form-type":"collection","properties":{"imagepath":{"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"},"imagefit":{"type":"string","x-source":"inject","x-form-label":"Slide Image Fit","x-form-type":"materialradio","x-default":"cover","properties":{"toggle":{"x-form-name":"Contain","x-form-value":"contain"},"accordion":{"x-form-name":"Cover","x-form-value":"cover"}}},"slidelink":{"type":"string","x-source":"inject","x-form-label":"Slide Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"text":{"type":"string","x-source":"inject","x-form-label":"Image Text","x-form-type":"texteditor"},"alt":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"}}} */
+    @Inject
+    private List<IComponent> slides;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Carousel Height","x-form-type":"materialrange","x-form-group":"style","x-default":80,"x-form-min":10,"x-form-max":100} */
-	public String getCarouselheight() {
-		return carouselheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Auto Play","x-form-type":"materialswitch"} */
-	public String getAutoplay() {
-		return autoplay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Images per page","x-form-type":"number","x-default":1} */
-	public String getItemsperpage() {
-		return itemsperpage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Interval","x-form-type":"materialrange","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":5,"x-form-min":1,"x-form-max":20} */
-	public String getInterval() {
-		return interval;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Pause On Hover","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":"false"} */
-	public String getPause() {
-		return pause;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Wrap","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	public String getWrap() {
-		return wrap;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Indicators","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	public String getIndicators() {
-		return indicators;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Controls","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
-	public String getControls() {
-		return controls;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Caption Background","x-form-type":"materialswitch"} */
-	public String getCaptionbg() {
-		return captionbg;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Slides","x-form-fieldLabel":"heading","x-form-group":"content","x-form-type":"collection","properties":{"imagepath":{"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"},"imagefit":{"type":"string","x-source":"inject","x-form-label":"Slide Image Fit","x-form-type":"materialradio","x-default":"cover","properties":{"toggle":{"x-form-name":"Contain","x-form-value":"contain"},"accordion":{"x-form-name":"Cover","x-form-value":"cover"}}},"slidelink":{"type":"string","x-source":"inject","x-form-label":"Slide Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"text":{"type":"string","x-source":"inject","x-form-label":"Image Text","x-form-type":"texteditor"},"alt":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"}}} */
-	public List<IComponent> getSlides() {
-		return slides;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Carousel Height","x-form-type":"materialrange","x-form-group":"style","x-default":80,"x-form-min":10,"x-form-max":100} */
+    public String getCarouselheight() {
+        return carouselheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Auto Play","x-form-type":"materialswitch"} */
+    public String getAutoplay() {
+        return autoplay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Images per page","x-form-type":"number","x-default":1} */
+    public String getItemsperpage() {
+        return itemsperpage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Interval","x-form-type":"materialrange","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":5,"x-form-min":1,"x-form-max":20} */
+    public String getInterval() {
+        return interval;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Pause On Hover","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.autoplay == 'true'","x-default":"false"} */
+    public String getPause() {
+        return pause;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Wrap","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    public String getWrap() {
+        return wrap;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Indicators","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    public String getIndicators() {
+        return indicators;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Controls","x-form-group":"style","x-form-type":"materialswitch","x-default":"true"} */
+    public String getControls() {
+        return controls;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Caption Background","x-form-type":"materialswitch"} */
+    public String getCaptionbg() {
+        return captionbg;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Slides","x-form-fieldLabel":"heading","x-form-group":"content","x-form-type":"collection","properties":{"imagepath":{"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"},"imagefit":{"type":"string","x-source":"inject","x-form-label":"Slide Image Fit","x-form-type":"materialradio","x-default":"cover","properties":{"toggle":{"x-form-name":"Contain","x-form-value":"contain"},"accordion":{"x-form-name":"Cover","x-form-value":"cover"}}},"slidelink":{"type":"string","x-source":"inject","x-form-label":"Slide Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"text":{"type":"string","x-source":"inject","x-form-label":"Image Text","x-form-type":"texteditor"},"alt":{"type":"string","x-source":"inject","x-form-label":"Image Alt Text","x-form-type":"text"}}} */
+    public List<IComponent> getSlides() {
+        return slides;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/CodeModel.java b/core/src/main/java/com/themecleanflex/models/CodeModel.java
index cb9bd5233..ba0dd034c 100644
--- a/core/src/main/java/com/themecleanflex/models/CodeModel.java
+++ b/core/src/main/java/com/themecleanflex/models/CodeModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -322,254 +323,256 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/code",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/code",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class CodeModel extends AbstractComponent {
 
-    public CodeModel(Resource r) { super(r); }
+    public CodeModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String language;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-type":"text"} */
-	@Inject
-	private String classes;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"textarea","x-form-max":"16000"} */
-	@Inject
-	private String text;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String language;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-type":"text"} */
+    @Inject
+    private String classes;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"textarea","x-form-max":"16000"} */
+    @Inject
+    private String text;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"text"} */
-	public String getLanguage() {
-		return language;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-type":"text"} */
-	public String getClasses() {
-		return classes;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"textarea","x-form-max":"16000"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"text"} */
+    public String getLanguage() {
+        return language;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-type":"text"} */
+    public String getClasses() {
+        return classes;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"textarea","x-form-max":"16000"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/ContainerModel.java b/core/src/main/java/com/themecleanflex/models/ContainerModel.java
index b072e1804..f87a21cf4 100644
--- a/core/src/main/java/com/themecleanflex/models/ContainerModel.java
+++ b/core/src/main/java/com/themecleanflex/models/ContainerModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.Container;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -161,95 +162,97 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/container",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/container",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class ContainerModel extends Container {
 
-    public ContainerModel(Resource r) { super(r); }
+    public ContainerModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Container Width","x-form-group":"content","x-form-type":"materialradio","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
-	@Inject
-	@Default(values ="auto")
-	private String width;
+    /* {"type":"string","x-source":"inject","x-form-label":"Container Width","x-form-group":"content","x-form-type":"materialradio","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
+    @Inject
+    @Default(values = "auto")
+    private String width;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.width == 'custom'","x-default":12} */
-	@Inject
-	@Default(values ="12")
-	private String colspan;
+    /* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.width == 'custom'","x-default":12} */
+    @Inject
+    @Default(values = "12")
+    private String colspan;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Container Width (Tablet)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
-	@Inject
-	@Default(values ="auto")
-	private String tabletwidth;
+    /* {"type":"string","x-source":"inject","x-form-label":"Container Width (Tablet)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
+    @Inject
+    @Default(values = "auto")
+    private String tabletwidth;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.tabletwidth == 'custom'","x-default":12} */
-	@Inject
-	@Default(values ="12")
-	private String tabletcolspan;
+    /* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.tabletwidth == 'custom'","x-default":12} */
+    @Inject
+    @Default(values = "12")
+    private String tabletcolspan;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Container Width (Mobile)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
-	@Inject
-	@Default(values ="auto")
-	private String mobilewidth;
+    /* {"type":"string","x-source":"inject","x-form-label":"Container Width (Mobile)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
+    @Inject
+    @Default(values = "auto")
+    private String mobilewidth;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.mobilewidth == 'custom'","x-default":12} */
-	@Inject
-	@Default(values ="12")
-	private String mobilecolspan;
+    /* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.mobilewidth == 'custom'","x-default":12} */
+    @Inject
+    @Default(values = "12")
+    private String mobilecolspan;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-form-group":"content","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
+    /* {"type":"string","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-form-group":"content","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Container Width","x-form-group":"content","x-form-type":"materialradio","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
-	public String getWidth() {
-		return width;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Container Width","x-form-group":"content","x-form-type":"materialradio","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
+    public String getWidth() {
+        return width;
+    }
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.width == 'custom'","x-default":12} */
-	public String getColspan() {
-		return colspan;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.width == 'custom'","x-default":12} */
+    public String getColspan() {
+        return colspan;
+    }
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Container Width (Tablet)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
-	public String getTabletwidth() {
-		return tabletwidth;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Container Width (Tablet)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
+    public String getTabletwidth() {
+        return tabletwidth;
+    }
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.tabletwidth == 'custom'","x-default":12} */
-	public String getTabletcolspan() {
-		return tabletcolspan;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.tabletwidth == 'custom'","x-default":12} */
+    public String getTabletcolspan() {
+        return tabletcolspan;
+    }
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Container Width (Mobile)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
-	public String getMobilewidth() {
-		return mobilewidth;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Container Width (Mobile)","x-form-type":"materialradio","x-form-group":"content","x-default":"auto","properties":{"auto":{"x-form-name":"Auto (fill available space)","x-form-value":"auto"},"custom":{"x-form-name":"Custom","x-form-value":"custom"}}} */
+    public String getMobilewidth() {
+        return mobilewidth;
+    }
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.mobilewidth == 'custom'","x-default":12} */
-	public String getMobilecolspan() {
-		return mobilecolspan;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Column Span (12 Columns)","x-form-group":"content","x-form-type":"materialrange","x-form-min":1,"x-form-max":12,"x-form-visible":"model.mobilewidth == 'custom'","x-default":12} */
+    public String getMobilecolspan() {
+        return mobilecolspan;
+    }
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-form-group":"content","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-form-group":"content","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/ContainerblockModel.java b/core/src/main/java/com/themecleanflex/models/ContainerblockModel.java
index 5fcdff4a3..abac91aa2 100644
--- a/core/src/main/java/com/themecleanflex/models/ContainerblockModel.java
+++ b/core/src/main/java/com/themecleanflex/models/ContainerblockModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.Container;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -333,237 +334,239 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/containerblock",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/containerblock",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class ContainerblockModel extends Container {
 
-    public ContainerblockModel(Resource r) { super(r); }
+    public ContainerblockModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Items Alignment","x-form-type":"materialselect","x-form-group":"content","x-default":"primary","properties":{"start":{"x-form-name":"Start","x-form-value":"items-start"},"center":{"x-form-name":"Center","x-form-value":"items-center"},"end":{"x-form-name":"End","x-form-value":"items-end"},"stretch":{"x-form-name":"Stretch","x-form-value":"items-stretch"},"baseline":{"x-form-name":"Baseline","x-form-value":"items-baseline"}}} */
-	@Inject
-	@Default(values ="primary")
-	private String alignitems;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Items Alignment","x-form-type":"materialselect","x-form-group":"content","x-default":"primary","properties":{"start":{"x-form-name":"Start","x-form-value":"items-start"},"center":{"x-form-name":"Center","x-form-value":"items-center"},"end":{"x-form-name":"End","x-form-value":"items-end"},"stretch":{"x-form-name":"Stretch","x-form-value":"items-stretch"},"baseline":{"x-form-name":"Baseline","x-form-value":"items-baseline"}}} */
+    @Inject
+    @Default(values = "primary")
+    private String alignitems;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Items Alignment","x-form-type":"materialselect","x-form-group":"content","x-default":"primary","properties":{"start":{"x-form-name":"Start","x-form-value":"items-start"},"center":{"x-form-name":"Center","x-form-value":"items-center"},"end":{"x-form-name":"End","x-form-value":"items-end"},"stretch":{"x-form-name":"Stretch","x-form-value":"items-stretch"},"baseline":{"x-form-name":"Baseline","x-form-value":"items-baseline"}}} */
-	public String getAlignitems() {
-		return alignitems;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Items Alignment","x-form-type":"materialselect","x-form-group":"content","x-default":"primary","properties":{"start":{"x-form-name":"Start","x-form-value":"items-start"},"center":{"x-form-name":"Center","x-form-value":"items-center"},"end":{"x-form-name":"End","x-form-value":"items-end"},"stretch":{"x-form-name":"Stretch","x-form-value":"items-stretch"},"baseline":{"x-form-name":"Baseline","x-form-value":"items-baseline"}}} */
+    public String getAlignitems() {
+        return alignitems;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/FooterModel.java b/core/src/main/java/com/themecleanflex/models/FooterModel.java
index ec21f0b66..edd9a24e6 100644
--- a/core/src/main/java/com/themecleanflex/models/FooterModel.java
+++ b/core/src/main/java/com/themecleanflex/models/FooterModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -437,328 +438,330 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/footer",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/footer",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class FooterModel extends AbstractComponent {
 
-    public FooterModel(Resource r) { super(r); }
+    public FooterModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Show Logo","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showlogo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-visible":"model.showlogo == 'true'","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String logo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-type":"text"} */
-	@Inject
-	private String logoalttext;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-type":"pathbrowser","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String logourl;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-form-visible":"model.showlogo == 'true'","x-form-min":1,"x-form-max":300} */
-	@Inject
-	private String logosize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Columns","x-form-type":"collection","x-form-group":"content","x-form-multifield":"true","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
-	@Inject
-	private List<IComponent> columns;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Copyright Text","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String copyright;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String iconcustomcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
-	@Inject
-	@Default(values ="#000000")
-	private String iconcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
-	@Inject
-	@Default(values ="25")
-	private String iconsize;
-
-	/* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
-	@Inject
-	private List<IComponent> icons;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Logo","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showlogo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-visible":"model.showlogo == 'true'","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String logo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-type":"text"} */
+    @Inject
+    private String logoalttext;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-type":"pathbrowser","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String logourl;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-form-visible":"model.showlogo == 'true'","x-form-min":1,"x-form-max":300} */
+    @Inject
+    private String logosize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Columns","x-form-type":"collection","x-form-group":"content","x-form-multifield":"true","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
+    @Inject
+    private List<IComponent> columns;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Copyright Text","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String copyright;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String iconcustomcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
+    @Inject
+    @Default(values = "#000000")
+    private String iconcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
+    @Inject
+    @Default(values = "25")
+    private String iconsize;
+
+    /* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
+    @Inject
+    private List<IComponent> icons;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Show Logo","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowlogo() {
-		return showlogo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-visible":"model.showlogo == 'true'","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getLogo() {
-		return logo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-type":"text"} */
-	public String getLogoalttext() {
-		return logoalttext;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-type":"pathbrowser","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getLogourl() {
-		return logourl;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-form-visible":"model.showlogo == 'true'","x-form-min":1,"x-form-max":300} */
-	public String getLogosize() {
-		return logosize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Columns","x-form-type":"collection","x-form-group":"content","x-form-multifield":"true","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
-	public List<IComponent> getColumns() {
-		return columns;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Copyright Text","x-form-group":"content","x-form-type":"text"} */
-	public String getCopyright() {
-		return copyright;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getIconcustomcolor() {
-		return iconcustomcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
-	public String getIconcolor() {
-		return iconcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
-	public String getIconsize() {
-		return iconsize;
-	}
-
-	/* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
-	public List<IComponent> getIcons() {
-		return icons;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Logo","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowlogo() {
+        return showlogo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-visible":"model.showlogo == 'true'","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getLogo() {
+        return logo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-type":"text"} */
+    public String getLogoalttext() {
+        return logoalttext;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-type":"pathbrowser","x-form-group":"content","x-form-visible":"model.showlogo == 'true'","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getLogourl() {
+        return logourl;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-form-visible":"model.showlogo == 'true'","x-form-min":1,"x-form-max":300} */
+    public String getLogosize() {
+        return logosize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Columns","x-form-type":"collection","x-form-group":"content","x-form-multifield":"true","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Text","x-form-type":"texteditor"}}} */
+    public List<IComponent> getColumns() {
+        return columns;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Copyright Text","x-form-group":"content","x-form-type":"text"} */
+    public String getCopyright() {
+        return copyright;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getIconcustomcolor() {
+        return iconcustomcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
+    public String getIconcolor() {
+        return iconcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
+    public String getIconsize() {
+        return iconsize;
+    }
+
+    /* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
+    public List<IComponent> getIcons() {
+        return icons;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/HeaderModel.java b/core/src/main/java/com/themecleanflex/models/HeaderModel.java
index b284c96e7..27b95f315 100644
--- a/core/src/main/java/com/themecleanflex/models/HeaderModel.java
+++ b/core/src/main/java/com/themecleanflex/models/HeaderModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -513,329 +514,331 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/header",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/header",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class HeaderModel extends AbstractComponent {
 
-    public HeaderModel(Resource r) { super(r); }
+    public HeaderModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String logo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String logoalttext;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String logourl;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-default":50,"x-form-min":1,"x-form-max":300} */
-	@Inject
-	@Default(values ="50")
-	private String logosize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Collapse Menu","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String collapsed;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Elevation","x-form-visible":"","x-form-group":"style","x-form-type":"materialrange","x-default":0,"x-form-min":0,"x-form-max":5} */
-	@Inject
-	private String elevation;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Sticky","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String sticky;
-
-	/* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
-	@Inject
-	private List<IComponent> links;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="text-blue-800")
-	private String linkcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	@Inject
-	@Default(values ="default")
-	private String buttonsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	@Inject
-	private List<IComponent> buttons;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String logo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String logoalttext;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String logourl;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-default":50,"x-form-min":1,"x-form-max":300} */
+    @Inject
+    @Default(values = "50")
+    private String logosize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Collapse Menu","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String collapsed;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Elevation","x-form-visible":"","x-form-group":"style","x-form-type":"materialrange","x-default":0,"x-form-min":0,"x-form-max":5} */
+    @Inject
+    private String elevation;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Sticky","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String sticky;
+
+    /* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
+    @Inject
+    private List<IComponent> links;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "text-blue-800")
+    private String linkcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    @Inject
+    @Default(values = "default")
+    private String buttonsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    @Inject
+    private List<IComponent> buttons;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getLogo() {
-		return logo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-type":"text"} */
-	public String getLogoalttext() {
-		return logoalttext;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getLogourl() {
-		return logourl;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-default":50,"x-form-min":1,"x-form-max":300} */
-	public String getLogosize() {
-		return logosize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Collapse Menu","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getCollapsed() {
-		return collapsed;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Elevation","x-form-visible":"","x-form-group":"style","x-form-type":"materialrange","x-default":0,"x-form-min":0,"x-form-max":5} */
-	public String getElevation() {
-		return elevation;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Sticky","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getSticky() {
-		return sticky;
-	}
-
-	/* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
-	public List<IComponent> getLinks() {
-		return links;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getLinkcolor() {
-		return linkcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	public String getButtonsize() {
-		return buttonsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	public List<IComponent> getButtons() {
-		return buttons;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo","x-form-type":"pathbrowser","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getLogo() {
+        return logo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Alt Text","x-form-group":"content","x-form-type":"text"} */
+    public String getLogoalttext() {
+        return logoalttext;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Url","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getLogourl() {
+        return logourl;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Logo Size","x-form-group":"content","x-form-type":"materialrange","x-default":50,"x-form-min":1,"x-form-max":300} */
+    public String getLogosize() {
+        return logosize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Collapse Menu","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getCollapsed() {
+        return collapsed;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Elevation","x-form-visible":"","x-form-group":"style","x-form-type":"materialrange","x-default":0,"x-form-min":0,"x-form-max":5} */
+    public String getElevation() {
+        return elevation;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Sticky","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getSticky() {
+        return sticky;
+    }
+
+    /* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
+    public List<IComponent> getLinks() {
+        return links;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getLinkcolor() {
+        return linkcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    public String getButtonsize() {
+        return buttonsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    public List<IComponent> getButtons() {
+        return buttons;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/MediaModel.java b/core/src/main/java/com/themecleanflex/models/MediaModel.java
index 987853951..881111062 100644
--- a/core/src/main/java/com/themecleanflex/models/MediaModel.java
+++ b/core/src/main/java/com/themecleanflex/models/MediaModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -114,100 +115,102 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/media",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/media",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class MediaModel extends AbstractComponent {
 
-    public MediaModel(Resource r) { super(r); }
+    public MediaModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"},"icon":{"x-form-name":"Icon","x-form-value":"icon"}}} */
-	@Inject
-	private String mediatype;
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"},"icon":{"x-form-name":"Icon","x-form-value":"icon"}}} */
+    @Inject
+    private String mediatype;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Chooser","x-form-type":"iconbrowser","x-form-hint":"Select an icon.","x-form-validator":"required","x-form-visible":"model.mediatype == 'icon'","x-form-families":["material","font awesome"]} */
-	@Inject
-	private String mediaicon;
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Chooser","x-form-type":"iconbrowser","x-form-hint":"Select an icon.","x-form-validator":"required","x-form-visible":"model.mediatype == 'icon'","x-form-families":["material","font awesome"]} */
+    @Inject
+    private String mediaicon;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-type":"materialrange","x-form-visible":"model.mediatype == 'icon'","x-default":50,"x-form-min":1,"x-form-max":1000} */
-	@Inject
-	@Default(values ="50")
-	private String mediaiconsize;
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-type":"materialrange","x-form-visible":"model.mediatype == 'icon'","x-default":50,"x-form-min":1,"x-form-max":1000} */
+    @Inject
+    @Default(values = "50")
+    private String mediaiconsize;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-form-type":"color","x-form-visible":"model.mediatype == 'icon'","x-default":"#000000"} */
-	@Inject
-	@Default(values ="#000000")
-	private String mediaiconcolor;
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-form-type":"color","x-form-visible":"model.mediatype == 'icon'","x-default":"#000000"} */
+    @Inject
+    @Default(values = "#000000")
+    private String mediaiconcolor;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String imagesrc;
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String imagesrc;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String videosrc;
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String videosrc;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-type":"text"} */
-	@Inject
-	private String mediatitle;
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-type":"text"} */
+    @Inject
+    private String mediatitle;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
-	@Inject
-	@Default(values ="100")
-	private String mediawidth;
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
+    @Inject
+    @Default(values = "100")
+    private String mediawidth;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"},"icon":{"x-form-name":"Icon","x-form-value":"icon"}}} */
-	public String getMediatype() {
-		return mediatype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Chooser","x-form-type":"iconbrowser","x-form-hint":"Select an icon.","x-form-validator":"required","x-form-visible":"model.mediatype == 'icon'","x-form-families":["material","font awesome"]} */
-	public String getMediaicon() {
-		return mediaicon;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-type":"materialrange","x-form-visible":"model.mediatype == 'icon'","x-default":50,"x-form-min":1,"x-form-max":1000} */
-	public String getMediaiconsize() {
-		return mediaiconsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-form-type":"color","x-form-visible":"model.mediatype == 'icon'","x-default":"#000000"} */
-	public String getMediaiconcolor() {
-		return mediaiconcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getImagesrc() {
-		return imagesrc;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getVideosrc() {
-		return videosrc;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-type":"text"} */
-	public String getMediatitle() {
-		return mediatitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
-	public String getMediawidth() {
-		return mediawidth;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"},"icon":{"x-form-name":"Icon","x-form-value":"icon"}}} */
+    public String getMediatype() {
+        return mediatype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Chooser","x-form-type":"iconbrowser","x-form-hint":"Select an icon.","x-form-validator":"required","x-form-visible":"model.mediatype == 'icon'","x-form-families":["material","font awesome"]} */
+    public String getMediaicon() {
+        return mediaicon;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-type":"materialrange","x-form-visible":"model.mediatype == 'icon'","x-default":50,"x-form-min":1,"x-form-max":1000} */
+    public String getMediaiconsize() {
+        return mediaiconsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-form-type":"color","x-form-visible":"model.mediatype == 'icon'","x-default":"#000000"} */
+    public String getMediaiconcolor() {
+        return mediaiconcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getImagesrc() {
+        return imagesrc;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getVideosrc() {
+        return videosrc;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-type":"text"} */
+    public String getMediatitle() {
+        return mediatitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
+    public String getMediawidth() {
+        return mediawidth;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/MediablockModel.java b/core/src/main/java/com/themecleanflex/models/MediablockModel.java
index b6778b449..56185b747 100644
--- a/core/src/main/java/com/themecleanflex/models/MediablockModel.java
+++ b/core/src/main/java/com/themecleanflex/models/MediablockModel.java
@@ -3,8 +3,6 @@
 import com.peregrine.model.api.ImageInfo;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
@@ -12,8 +10,6 @@
 import org.apache.sling.models.annotations.Model;
 
 import javax.inject.Inject;
-
-import com.peregrine.model.api.ImageInfo;
 import java.awt.Dimension;
 
 /*
@@ -373,283 +369,285 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/mediablock",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/mediablock",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class MediablockModel extends AbstractComponent {
 
-    public MediablockModel(Resource r) { super(r); }
+    public MediablockModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String mediatype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	@Inject
-	@Default(values ="")
-	private String imagesrc;
-
-	@Inject
-	@ImageInfo(name="imagesrc")
-	private Dimension imagesrcSize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	@Inject
-	@Default(values ="")
-	private String videosrc;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-group":"style","x-form-type":"text"} */
-	@Inject
-	private String mediatitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
-	@Inject
-	@Default(values ="100")
-	private String mediawidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String mediatype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    @Inject
+    @Default(values = "")
+    private String imagesrc;
+
+    @Inject
+    @ImageInfo(name = "imagesrc")
+    private Dimension imagesrcSize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    @Inject
+    @Default(values = "")
+    private String videosrc;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-group":"style","x-form-type":"text"} */
+    @Inject
+    private String mediatitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
+    @Inject
+    @Default(values = "100")
+    private String mediawidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getMediatype() {
-		return mediatype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	public String getImagesrc() {
-		return imagesrc;
-	}
-
-	public Dimension getImagesrcSize() {
-		return imagesrcSize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	public String getVideosrc() {
-		return videosrc;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-group":"style","x-form-type":"text"} */
-	public String getMediatitle() {
-		return mediatitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
-	public String getMediawidth() {
-		return mediawidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getMediatype() {
+        return mediatype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    public String getImagesrc() {
+        return imagesrc;
+    }
+
+    public Dimension getImagesrcSize() {
+        return imagesrcSize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    public String getVideosrc() {
+        return videosrc;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.mediatype == 'image' or model.mediatype == 'video'","x-form-group":"style","x-form-type":"text"} */
+    public String getMediatitle() {
+        return mediatitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-default":100,"x-form-min":10,"x-form-max":100} */
+    public String getMediawidth() {
+        return mediawidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/MenubuttonsModel.java b/core/src/main/java/com/themecleanflex/models/MenubuttonsModel.java
index 8896dfc95..cda44921e 100644
--- a/core/src/main/java/com/themecleanflex/models/MenubuttonsModel.java
+++ b/core/src/main/java/com/themecleanflex/models/MenubuttonsModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -113,44 +114,46 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/menubuttons",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/menubuttons",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class MenubuttonsModel extends AbstractComponent {
 
-    public MenubuttonsModel(Resource r) { super(r); }
+    public MenubuttonsModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	@Inject
-	@Default(values ="default")
-	private String buttonsize;
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    @Inject
+    @Default(values = "default")
+    private String buttonsize;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	@Inject
-	private List<IComponent> buttons;
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    @Inject
+    private List<IComponent> buttons;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	public String getButtonsize() {
-		return buttonsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	public List<IComponent> getButtons() {
-		return buttons;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-group":"style","x-form-type":"materialselect","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    public String getButtonsize() {
+        return buttonsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    public List<IComponent> getButtons() {
+        return buttons;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/NavigationModel.java b/core/src/main/java/com/themecleanflex/models/NavigationModel.java
index 12e61c673..0b4ba565d 100644
--- a/core/src/main/java/com/themecleanflex/models/NavigationModel.java
+++ b/core/src/main/java/com/themecleanflex/models/NavigationModel.java
@@ -4,9 +4,6 @@
 import com.peregrine.adaption.PerPageManager;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.ArrayList;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
@@ -15,6 +12,10 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import javax.inject.Inject;
+import java.util.ArrayList;
+import java.util.List;
+
 import static com.peregrine.commons.util.PerConstants.EXCLUDE_FROM_SITEMAP;
 
 /*
@@ -349,351 +350,357 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/navigation",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/navigation",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class NavigationModel extends AbstractComponent {
 
-    public NavigationModel(Resource r) { super(r); }
+    public NavigationModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String rootpage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
-	@Inject
-	private String excludesitemapexcludes;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Navigation Alignment","x-form-type":"materialradio","x-form-group":"style","x-default":"end","properties":{"start":{"x-form-name":"Start","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"end":{"x-form-name":"End","x-form-value":"end"}}} */
-	@Inject
-	@Default(values ="end")
-	private String justifyitems;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String rootpage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
+    @Inject
+    private String excludesitemapexcludes;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Navigation Alignment","x-form-type":"materialradio","x-form-group":"style","x-default":"end","properties":{"start":{"x-form-name":"Start","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"end":{"x-form-name":"End","x-form-value":"end"}}} */
+    @Inject
+    @Default(values = "end")
+    private String justifyitems;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getRootpage() {
-		return rootpage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
-	public String getExcludesitemapexcludes() {
-		return excludesitemapexcludes;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Navigation Alignment","x-form-type":"materialradio","x-form-group":"style","x-default":"end","properties":{"start":{"x-form-name":"Start","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"end":{"x-form-name":"End","x-form-value":"end"}}} */
-	public String getJustifyitems() {
-		return justifyitems;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getRootpage() {
+        return rootpage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
+    public String getExcludesitemapexcludes() {
+        return excludesitemapexcludes;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Navigation Alignment","x-form-type":"materialradio","x-form-group":"style","x-default":"end","properties":{"start":{"x-form-name":"Start","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"end":{"x-form-name":"End","x-form-value":"end"}}} */
+    public String getJustifyitems() {
+        return justifyitems;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
 
     //GEN[:CUSTOMGETTERS
-  private static final Logger LOG = LoggerFactory.getLogger(NavigationModel.class);
-
-	/* {"type":"string","x-source":"inject","x-form-type":"number","x-form-label":"Levels","x-form-default":1,"x-form-min":1} */
-	public String getLevels() {
-		return "2";
-	}
-
-	public String getExcludeSitemapExcludes() {
-		return excludesitemapexcludes == null ? "false" : excludesitemapexcludes;
-	}
-
-	public String getRootPageTitle() {
-		PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
-		PerPage page = ppm.getPage(getRootpage());
-        if(page == null) return "not adaptable";
-        return page != null ? page.getTitle(): "";
-	}
-
-	public String getRootPageLink() {
-		PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
-		PerPage page = ppm.getPage(getRootpage());
-        if(page == null) return "not adaptable";
-        return page != null ? page.getPath(): "";
-	}
-
-	public List<Page> getChildrenPages() {
-		boolean excludeSitemap = Boolean.parseBoolean(getExcludeSitemapExcludes());
-		List<Page> childPages = new ArrayList<Page>();
-		String rootPage = getRootpage();
-		if (rootPage != null) {
-			int levels = Integer.parseInt(getLevels());
-			PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
-			PerPage page = ppm.getPage(getRootpage());
-			if (page != null) {
-				for (PerPage child : page.listChildren()) {
-					if(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
-						continue;
-					}
-					if (!child.getPath().equals(page.getPath())) {
-						childPages.add(new Page(child, levels, excludeSitemap));
-					}
-				}
-			}
-		}
-		return childPages;
-	}
-
-	class Page {
-
-	private PerPage page;
-	private int levels;
-	private boolean excludeSitemap;
-
-	public Page(PerPage page, int levels, boolean excludeSitemap) {
-		this.page = page;
-		this.levels = levels;
-		this.excludeSitemap = excludeSitemap;
-	}
-
-	public String getTitle() {
-		return page.getTitle();
-	}
-
-	public String getPath() {
-		return page.getPath();
-	}
-
-	public int getLevels() {
-		return levels;
-	}
-
-	public Boolean getHasChildren() {
-		return levels <= 1 ? false : true;
-	}
-
-	public List<Page> getChildrenPages() {
-		List<Page> childPages = new ArrayList<Page>();
-		System.out.println();
-		if(page != null) {
-			for (PerPage child: page.listChildren()) {
-				if(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
-					continue;
-				}
-				if(!child.getPath().equals(page.getPath())) {
-					childPages.add(new Page(child, levels-1, excludeSitemap));
-				}
-			}
-		}
-		return childPages;
-	}
-}
+    private static final Logger LOG = LoggerFactory.getLogger(NavigationModel.class);
+
+    /* {"type":"string","x-source":"inject","x-form-type":"number","x-form-label":"Levels","x-form-default":1,"x-form-min":1} */
+    public String getLevels() {
+        return "2";
+    }
+
+    public String getExcludeSitemapExcludes() {
+        return excludesitemapexcludes == null ? "false" : excludesitemapexcludes;
+    }
+
+    public String getRootPageTitle() {
+        PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
+        PerPage page = ppm.getPage(getRootpage());
+        if (page == null) {
+            return "not adaptable";
+        }
+        return page != null ? page.getTitle() : "";
+    }
+
+    public String getRootPageLink() {
+        PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
+        PerPage page = ppm.getPage(getRootpage());
+        if (page == null) {
+            return "not adaptable";
+        }
+        return page != null ? page.getPath() : "";
+    }
+
+    public List<Page> getChildrenPages() {
+        boolean excludeSitemap = Boolean.parseBoolean(getExcludeSitemapExcludes());
+        List<Page> childPages = new ArrayList<Page>();
+        String rootPage = getRootpage();
+        if (rootPage != null) {
+            int levels = Integer.parseInt(getLevels());
+            PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
+            PerPage page = ppm.getPage(getRootpage());
+            if (page != null) {
+                for (PerPage child : page.listChildren()) {
+                    if (excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
+                        continue;
+                    }
+                    if (!child.getPath().equals(page.getPath())) {
+                        childPages.add(new Page(child, levels, excludeSitemap));
+                    }
+                }
+            }
+        }
+        return childPages;
+    }
+
+    class Page {
+
+        private PerPage page;
+        private int levels;
+        private boolean excludeSitemap;
+
+        public Page(PerPage page, int levels, boolean excludeSitemap) {
+            this.page = page;
+            this.levels = levels;
+            this.excludeSitemap = excludeSitemap;
+        }
+
+        public String getTitle() {
+            return page.getTitle();
+        }
+
+        public String getPath() {
+            return page.getPath();
+        }
+
+        public int getLevels() {
+            return levels;
+        }
+
+        public Boolean getHasChildren() {
+            return levels <= 1 ? false : true;
+        }
+
+        public List<Page> getChildrenPages() {
+            List<Page> childPages = new ArrayList<Page>();
+            System.out.println();
+            if (page != null) {
+                for (PerPage child : page.listChildren()) {
+                    if (excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
+                        continue;
+                    }
+                    if (!child.getPath().equals(page.getPath())) {
+                        childPages.add(new Page(child, levels - 1, excludeSitemap));
+                    }
+                }
+            }
+            return childPages;
+        }
+    }
     //GEN]
 
 }
diff --git a/core/src/main/java/com/themecleanflex/models/NoteModel.java b/core/src/main/java/com/themecleanflex/models/NoteModel.java
index 402263ad0..b67c916d1 100644
--- a/core/src/main/java/com/themecleanflex/models/NoteModel.java
+++ b/core/src/main/java/com/themecleanflex/models/NoteModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -339,246 +340,248 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/note",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/note",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class NoteModel extends AbstractComponent {
 
-    public NoteModel(Resource r) { super(r); }
+    public NoteModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"texteditor"} */
-	@Inject
-	private String text;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Note Type","x-form-type":"materialselect","x-form-group":"content","x-default":"note","properties":{"note":{"x-form-name":"Note","x-form-value":"note"},"tip":{"x-form-name":"Tip","x-form-value":"tip"},"important":{"x-form-name":"Important","x-form-value":"important"},"caution":{"x-form-name":"Caution","x-form-value":"caution"},"warning":{"x-form-name":"Warning","x-form-value":"warning"}}} */
-	@Inject
-	@Default(values ="note")
-	private String notetype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"texteditor"} */
+    @Inject
+    private String text;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Note Type","x-form-type":"materialselect","x-form-group":"content","x-default":"note","properties":{"note":{"x-form-name":"Note","x-form-value":"note"},"tip":{"x-form-name":"Tip","x-form-value":"tip"},"important":{"x-form-name":"Important","x-form-value":"important"},"caution":{"x-form-name":"Caution","x-form-value":"caution"},"warning":{"x-form-name":"Warning","x-form-value":"warning"}}} */
+    @Inject
+    @Default(values = "note")
+    private String notetype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"texteditor"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Note Type","x-form-type":"materialselect","x-form-group":"content","x-default":"note","properties":{"note":{"x-form-name":"Note","x-form-value":"note"},"tip":{"x-form-name":"Tip","x-form-value":"tip"},"important":{"x-form-name":"Important","x-form-value":"important"},"caution":{"x-form-name":"Caution","x-form-value":"caution"},"warning":{"x-form-name":"Warning","x-form-value":"warning"}}} */
-	public String getNotetype() {
-		return notetype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-type":"texteditor"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Note Type","x-form-type":"materialselect","x-form-group":"content","x-default":"note","properties":{"note":{"x-form-name":"Note","x-form-value":"note"},"tip":{"x-form-name":"Tip","x-form-value":"tip"},"important":{"x-form-name":"Important","x-form-value":"important"},"caution":{"x-form-name":"Caution","x-form-value":"caution"},"warning":{"x-form-name":"Warning","x-form-value":"warning"}}} */
+    public String getNotetype() {
+        return notetype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/PagelistModel.java b/core/src/main/java/com/themecleanflex/models/PagelistModel.java
index b9ee0d707..f2870d4f0 100644
--- a/core/src/main/java/com/themecleanflex/models/PagelistModel.java
+++ b/core/src/main/java/com/themecleanflex/models/PagelistModel.java
@@ -4,10 +4,6 @@
 import com.peregrine.adaption.PerPageManager;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.ArrayList;
-import java.util.List;
-import javax.inject.Inject;
-
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.api.resource.ValueMap;
 import org.apache.sling.models.annotations.Default;
@@ -17,6 +13,10 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import javax.inject.Inject;
+import java.util.ArrayList;
+import java.util.List;
+
 import static com.peregrine.commons.util.PerConstants.EXCLUDE_FROM_SITEMAP;
 /*
     //GEN[:DATA
@@ -379,457 +379,465 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/pagelist",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/pagelist",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class PagelistModel extends AbstractComponent {
 
-    public PagelistModel(Resource r) { super(r); }
+    public PagelistModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String rootpage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
-	@Inject
-	private String includeroot;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
-	@Inject
-	private String excludesitemapexcludes;
-
-	/* {"type":"string","x-source":"inject","x-form-type":"number","x-form-group":"content","x-form-label":"Levels","x-form-default":1,"x-form-min":1} */
-	@Inject
-	private String levels;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"References","x-form-fieldLabel":"contentname","x-form-type":"collection","x-form-group":"content","properties":{"contentname":{"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-type":"text"},"contentfield":{"type":"string","x-source":"inject","x-form-label":"Content Field","x-form-type":"text"},"htmlelement":{"type":"string","x-source":"inject","x-form-label":"HTML Element","x-form-type":"text"},"cssclass":{"type":"string","x-source":"inject","x-form-label":"CSS Classes","x-form-type":"text"}}} */
-	@Inject
-	private List<IComponent> references;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String rootpage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
+    @Inject
+    private String includeroot;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
+    @Inject
+    private String excludesitemapexcludes;
+
+    /* {"type":"string","x-source":"inject","x-form-type":"number","x-form-group":"content","x-form-label":"Levels","x-form-default":1,"x-form-min":1} */
+    @Inject
+    private String levels;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"References","x-form-fieldLabel":"contentname","x-form-type":"collection","x-form-group":"content","properties":{"contentname":{"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-type":"text"},"contentfield":{"type":"string","x-source":"inject","x-form-label":"Content Field","x-form-type":"text"},"htmlelement":{"type":"string","x-source":"inject","x-form-label":"HTML Element","x-form-type":"text"},"cssclass":{"type":"string","x-source":"inject","x-form-label":"CSS Classes","x-form-type":"text"}}} */
+    @Inject
+    private List<IComponent> references;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getRootpage() {
-		return rootpage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
-	public String getIncluderoot() {
-		return includeroot;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
-	public String getExcludesitemapexcludes() {
-		return excludesitemapexcludes;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"References","x-form-fieldLabel":"contentname","x-form-type":"collection","x-form-group":"content","properties":{"contentname":{"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-type":"text"},"contentfield":{"type":"string","x-source":"inject","x-form-label":"Content Field","x-form-type":"text"},"htmlelement":{"type":"string","x-source":"inject","x-form-label":"HTML Element","x-form-type":"text"},"cssclass":{"type":"string","x-source":"inject","x-form-label":"CSS Classes","x-form-type":"text"}}} */
-	public List<IComponent> getReferences() {
-		return references;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getRootpage() {
+        return rootpage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
+    public String getIncluderoot() {
+        return includeroot;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-form-default":false} */
+    public String getExcludesitemapexcludes() {
+        return excludesitemapexcludes;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"References","x-form-fieldLabel":"contentname","x-form-type":"collection","x-form-group":"content","properties":{"contentname":{"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-type":"text"},"contentfield":{"type":"string","x-source":"inject","x-form-label":"Content Field","x-form-type":"text"},"htmlelement":{"type":"string","x-source":"inject","x-form-label":"HTML Element","x-form-type":"text"},"cssclass":{"type":"string","x-source":"inject","x-form-label":"CSS Classes","x-form-type":"text"}}} */
+    public List<IComponent> getReferences() {
+        return references;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
 
     //GEN[:CUSTOMGETTERS
-	private static final Logger LOG = LoggerFactory.getLogger(PagelistModel.class);
-
-	/* {"type":"string","x-source":"inject","x-form-type":"number","x-form-label":"Levels","x-form-default":1,"x-form-min":1} */
-	public String getLevels() {
-		return levels == null ? "1" : levels;
-	}
-
-  public String getExcludeSitemapExcludes() {
-		return  excludesitemapexcludes == null ? "false" : excludesitemapexcludes;
-  }
-
-  	public String getRootPage() {
-		if(rootpage == null) {
-			PerPage currentPage =  getResource().adaptTo(PerPage.class);
-			if(currentPage != null) {
-				return currentPage.getPath();
-			}
-		}
-		return rootpage;
-	}
-
-	public String getRootPageTitle() {
-		PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
-		PerPage page = ppm.getPage(getRootPage());
-        if(page == null) return "not adaptable";
-        return page != null ? page.getTitle(): "";
-	}
-
-	public String getRootPageLink() {
-		PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
-		PerPage page = ppm.getPage(getRootPage());
-        if(page == null) return "not adaptable";
-        return page != null ? page.getPath(): "";
-	}
-
-	public List<Page> getChildrenPages() {
-		List<Page> childPages = new ArrayList<Page>();
-		String rootPage = getRootPage();
-		if (rootPage != null) {
-			int levels = Integer.parseInt(getLevels());
-      boolean excludeSitemap = Boolean.parseBoolean(getExcludeSitemapExcludes());
-			PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
-			PerPage page = ppm.getPage(getRootPage());
-			if (page != null) {
-				for (PerPage child : page.listChildren()) {
-					if ( !(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false))
-							&& (!child.getPath().equals(page.getPath()))
-						) {
-						childPages.add(new Page(child, levels, getReferences(), excludeSitemap));
-					}
-				}
-			}
-		}
-		return childPages;
-	}
-
-	class Page {
-
-	private PerPage page;
-	private int levels;
-  private List<IComponent> references;
-    private boolean excludeSitemap;
-
-	// public Page(PerPage page) {
-	// 	this.page = page;
-	// }
-
-	// public Page(PerPage page, int levels) {
-	// 	this.page = page;
-	// 	this.levels = levels;
-	// }
-
-	public Page(PerPage page, int levels, List<IComponent> references, boolean excludeSitemap) {
-		this.page = page;
-    this.levels = levels;
-    this.references = references;
-    this.excludeSitemap = excludeSitemap;
-  }
-
-  public String getTitle() {
-		return page.getTitle();
-	}
-
-	public String getPath() {
-		return page.getPath();
-	}
-
-	public int getLevels() {
-		return levels;
-	}
-
-  public List<ReferencedContent> getReferences() {
-    List<ReferencedContent> ret = new ArrayList<>();
-    if(references == null) return ret;
-    for (IComponent ref : references) {
-      Resource res = ref.getResource();
-      ValueMap vm = res.adaptTo(ValueMap.class);
-      String contentName = vm.get("contentname", String.class);
-      String contentField = vm.get("contentfield", String.class) != null ? vm.get("contentfield", String.class) : "text";
-      String cssClass = vm.get("cssclass", String.class);
-      String tagName = vm.get("htmlelement", String.class);
-      if(contentName != null && tagName != null) {
-        Resource content = findResourceWithName(page.getContentResource(), contentName);
-        if(content != null) {
-          ValueMap props = content.adaptTo(ValueMap.class);
-          String value = props.get(contentField, String.class); 
-          ret.add(new ReferencedContent(contentField, value, tagName, cssClass, content.getPath()));
+    private static final Logger LOG = LoggerFactory.getLogger(PagelistModel.class);
+
+    /* {"type":"string","x-source":"inject","x-form-type":"number","x-form-label":"Levels","x-form-default":1,"x-form-min":1} */
+    public String getLevels() {
+        return levels == null ? "1" : levels;
+    }
+
+    public String getExcludeSitemapExcludes() {
+        return excludesitemapexcludes == null ? "false" : excludesitemapexcludes;
+    }
+
+    public String getRootPage() {
+        if (rootpage == null) {
+            PerPage currentPage = getResource().adaptTo(PerPage.class);
+            if (currentPage != null) {
+                return currentPage.getPath();
+            }
         }
-      }
+        return rootpage;
     }
-    return ret;
-  }
 
-	private Resource findResourceWithName(Resource resource, String contentName) {
-    ValueMap vm = resource.adaptTo(ValueMap.class);
-    String contentname = vm.get("contentname", String.class);
-    if(contentName.equals(contentname)) {
-      return resource;
+    public String getRootPageTitle() {
+        PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
+        PerPage page = ppm.getPage(getRootPage());
+        if (page == null) {
+            return "not adaptable";
+        }
+        return page != null ? page.getTitle() : "";
     }
-    for (Resource child : resource.getChildren()) {
-      Resource ret = findResourceWithName(child, contentName);
-      if(ret != null) {
-        return ret;
-      }
+
+    public String getRootPageLink() {
+        PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
+        PerPage page = ppm.getPage(getRootPage());
+        if (page == null) {
+            return "not adaptable";
+        }
+        return page != null ? page.getPath() : "";
     }
-    return null;
-  }
-
-  public Boolean getHasChildren() {
-		return levels <= 1 ? false : true;
-	}
-
-	public List<Page> getChildrenPages() {
-		List<Page> childPages = new ArrayList<Page>();
-		if(page != null) {
-			for (PerPage child: page.listChildren()) {
-				if(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
-					continue;
-				}
-				if(levels > 0 && !child.getPath().equals(page.getPath())) {
-					childPages.add(new Page(child, levels-1, references, excludeSitemap));
-				}
-			}
-		}
-		return childPages;
-	}
-}
 
-class ReferencedContent {
+    public List<Page> getChildrenPages() {
+        List<Page> childPages = new ArrayList<Page>();
+        String rootPage = getRootPage();
+        if (rootPage != null) {
+            int levels = Integer.parseInt(getLevels());
+            boolean excludeSitemap = Boolean.parseBoolean(getExcludeSitemapExcludes());
+            PerPageManager ppm = getResource().getResourceResolver().adaptTo(PerPageManager.class);
+            PerPage page = ppm.getPage(getRootPage());
+            if (page != null) {
+                for (PerPage child : page.listChildren()) {
+                    if (!(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false))
+                        && (!child.getPath().equals(page.getPath()))
+                    ) {
+                        childPages.add(new Page(child, levels, getReferences(), excludeSitemap));
+                    }
+                }
+            }
+        }
+        return childPages;
+    }
 
-  private String path;
-  private String contentField;
-  private String value;
-  private String htmlElement;
-  private String cssClass;
+    class Page {
 
-  public ReferencedContent(String contentField, String value, String htmlElement, String cssClass, String path) {
-    this.path = path;
-    this.contentField = contentField;
-    this.value = value;
-    this.htmlElement = htmlElement;
-    this.cssClass = cssClass;
-  }
+        private PerPage page;
+        private int levels;
+        private List<IComponent> references;
+        private boolean excludeSitemap;
 
-  public String getKey() {
-    return path + '.' + contentField;
-  }
+        // public Page(PerPage page) {
+        // 	this.page = page;
+        // }
 
-  public String getContentField() {
-    return contentField;
-  }
+        // public Page(PerPage page, int levels) {
+        // 	this.page = page;
+        // 	this.levels = levels;
+        // }
 
-  public String getValue() {
-    return value;
-  }
+        public Page(PerPage page, int levels, List<IComponent> references, boolean excludeSitemap) {
+            this.page = page;
+            this.levels = levels;
+            this.references = references;
+            this.excludeSitemap = excludeSitemap;
+        }
+
+        public String getTitle() {
+            return page.getTitle();
+        }
 
-  public String getHtmlElement() {
-    return htmlElement;
-  }
+        public String getPath() {
+            return page.getPath();
+        }
 
-  public String getCssClass() {
-    return cssClass;
-  }
+        public int getLevels() {
+            return levels;
+        }
 
-}
+        public List<ReferencedContent> getReferences() {
+            List<ReferencedContent> ret = new ArrayList<>();
+            if (references == null) {
+                return ret;
+            }
+            for (IComponent ref : references) {
+                Resource res = ref.getResource();
+                ValueMap vm = res.adaptTo(ValueMap.class);
+                String contentName = vm.get("contentname", String.class);
+                String contentField = vm.get("contentfield", String.class) != null ? vm.get("contentfield", String.class) : "text";
+                String cssClass = vm.get("cssclass", String.class);
+                String tagName = vm.get("htmlelement", String.class);
+                if (contentName != null && tagName != null) {
+                    Resource content = findResourceWithName(page.getContentResource(), contentName);
+                    if (content != null) {
+                        ValueMap props = content.adaptTo(ValueMap.class);
+                        String value = props.get(contentField, String.class);
+                        ret.add(new ReferencedContent(contentField, value, tagName, cssClass, content.getPath()));
+                    }
+                }
+            }
+            return ret;
+        }
+
+        private Resource findResourceWithName(Resource resource, String contentName) {
+            ValueMap vm = resource.adaptTo(ValueMap.class);
+            String contentname = vm.get("contentname", String.class);
+            if (contentName.equals(contentname)) {
+                return resource;
+            }
+            for (Resource child : resource.getChildren()) {
+                Resource ret = findResourceWithName(child, contentName);
+                if (ret != null) {
+                    return ret;
+                }
+            }
+            return null;
+        }
+
+        public Boolean getHasChildren() {
+            return levels <= 1 ? false : true;
+        }
+
+        public List<Page> getChildrenPages() {
+            List<Page> childPages = new ArrayList<Page>();
+            if (page != null) {
+                for (PerPage child : page.listChildren()) {
+                    if (excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) {
+                        continue;
+                    }
+                    if (levels > 0 && !child.getPath().equals(page.getPath())) {
+                        childPages.add(new Page(child, levels - 1, references, excludeSitemap));
+                    }
+                }
+            }
+            return childPages;
+        }
+    }
+
+    class ReferencedContent {
+
+        private String path;
+        private String contentField;
+        private String value;
+        private String htmlElement;
+        private String cssClass;
+
+        public ReferencedContent(String contentField, String value, String htmlElement, String cssClass, String path) {
+            this.path = path;
+            this.contentField = contentField;
+            this.value = value;
+            this.htmlElement = htmlElement;
+            this.cssClass = cssClass;
+        }
+
+        public String getKey() {
+            return path + '.' + contentField;
+        }
+
+        public String getContentField() {
+            return contentField;
+        }
+
+        public String getValue() {
+            return value;
+        }
+
+        public String getHtmlElement() {
+            return htmlElement;
+        }
+
+        public String getCssClass() {
+            return cssClass;
+        }
+
+    }
 
     //GEN]
 
diff --git a/core/src/main/java/com/themecleanflex/models/PagelistnestedModel.java b/core/src/main/java/com/themecleanflex/models/PagelistnestedModel.java
index c69ecc9b4..42cf18847 100644
--- a/core/src/main/java/com/themecleanflex/models/PagelistnestedModel.java
+++ b/core/src/main/java/com/themecleanflex/models/PagelistnestedModel.java
@@ -28,27 +28,29 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/pagelistnested",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/pagelistnested",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class PagelistnestedModel extends AbstractComponent {
 
-    public PagelistnestedModel(Resource r) { super(r); }
+    public PagelistnestedModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    
+
 //GEN]
 
     //GEN[:GETTERS
-    
+
 //GEN]
 
     //GEN[:CUSTOMGETTERS
diff --git a/core/src/main/java/com/themecleanflex/models/PagerModel.java b/core/src/main/java/com/themecleanflex/models/PagerModel.java
index ea5cbca90..394d7aae9 100644
--- a/core/src/main/java/com/themecleanflex/models/PagerModel.java
+++ b/core/src/main/java/com/themecleanflex/models/PagerModel.java
@@ -1,9 +1,9 @@
 package com.themecleanflex.models;
 
 import com.peregrine.adaption.PerPage;
+import com.peregrine.commons.util.PerConstants;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.api.resource.ValueMap;
 import org.apache.sling.models.annotations.Default;
@@ -13,7 +13,7 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
-import com.peregrine.commons.util.PerConstants;
+import javax.inject.Inject;
 /*
     //GEN[:DATA
     {
@@ -420,397 +420,410 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/pager",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/pager",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class PagerModel extends AbstractComponent {
 
-  	private static final Logger LOG = LoggerFactory.getLogger(PagerModel.class);
+    private static final Logger LOG = LoggerFactory.getLogger(PagerModel.class);
 
-    public PagerModel(Resource r) { super(r); }
+    public PagerModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String rootpage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
-	@Inject
-	private String includeroot;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	@Inject
-	@Default(values ="default")
-	private String buttonsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="primary")
-	private String buttoncolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Previous Label","x-form-type":"text","x-form-group":"content","x-default":"Previous"} */
-	@Inject
-	@Default(values ="Previous")
-	private String prevlabel;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Next Label","x-form-type":"text","x-form-group":"content","x-default":"Next"} */
-	@Inject
-	@Default(values ="Next")
-	private String nextlabel;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Disable the previous button","x-form-type":"materialswitch","x-form-group":"content","x-default":false} */
-	@Inject
-	private String disableprevious;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
-	@Inject
-	private String excludesitemapexcludes;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String rootpage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
+    @Inject
+    private String includeroot;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    @Inject
+    @Default(values = "default")
+    private String buttonsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "primary")
+    private String buttoncolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Previous Label","x-form-type":"text","x-form-group":"content","x-default":"Previous"} */
+    @Inject
+    @Default(values = "Previous")
+    private String prevlabel;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Next Label","x-form-type":"text","x-form-group":"content","x-default":"Next"} */
+    @Inject
+    @Default(values = "Next")
+    private String nextlabel;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Disable the previous button","x-form-type":"materialswitch","x-form-group":"content","x-default":false} */
+    @Inject
+    private String disableprevious;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
+    @Inject
+    private String excludesitemapexcludes;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getRootpage() {
-		return rootpage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
-	public String getIncluderoot() {
-		return includeroot;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	public String getButtonsize() {
-		return buttonsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getButtoncolor() {
-		return buttoncolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Previous Label","x-form-type":"text","x-form-group":"content","x-default":"Previous"} */
-	public String getPrevlabel() {
-		return prevlabel;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Next Label","x-form-type":"text","x-form-group":"content","x-default":"Next"} */
-	public String getNextlabel() {
-		return nextlabel;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Disable the previous button","x-form-type":"materialswitch","x-form-group":"content","x-default":false} */
-	public String getDisableprevious() {
-		return disableprevious;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
-	public String getExcludesitemapexcludes() {
-		return excludesitemapexcludes;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-type":"pathbrowser","x-form-label":"Root Page","x-form-group":"content","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getRootpage() {
+        return rootpage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Include Root","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
+    public String getIncluderoot() {
+        return includeroot;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    public String getButtonsize() {
+        return buttonsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-form-group":"style","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getButtoncolor() {
+        return buttoncolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Previous Label","x-form-type":"text","x-form-group":"content","x-default":"Previous"} */
+    public String getPrevlabel() {
+        return prevlabel;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Next Label","x-form-type":"text","x-form-group":"content","x-default":"Next"} */
+    public String getNextlabel() {
+        return nextlabel;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Disable the previous button","x-form-type":"materialswitch","x-form-group":"content","x-default":false} */
+    public String getDisableprevious() {
+        return disableprevious;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Exclude pages Excluded in Sitemap","x-form-group":"content","x-form-type":"materialswitch","x-default":false} */
+    public String getExcludesitemapexcludes() {
+        return excludesitemapexcludes;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
 
     //GEN[:CUSTOMGETTERS
     //GEN]
-	public String getExcludeSitemapExcludes() {
-		return  excludesitemapexcludes == null ? "false" : excludesitemapexcludes;
-	}
-
-	public String getDisablePrevious() {
-		return disableprevious == null ? "false" : disableprevious;
-	}
-
-	public String getRootPage() {
-		if(rootpage == null)
-			return "";
-		if(rootpage.endsWith("/"))
-			return rootpage.substring(0,rootpage.length()-1);
-		return rootpage;
-	}
-
-	public String getIncludeRoot() {
-		return includeroot == null ? "false" : includeroot;
-	}
+    public String getExcludeSitemapExcludes() {
+        return excludesitemapexcludes == null ? "false" : excludesitemapexcludes;
+    }
+
+    public String getDisablePrevious() {
+        return disableprevious == null ? "false" : disableprevious;
+    }
+
+    public String getRootPage() {
+        if (rootpage == null) {
+            return "";
+        }
+        if (rootpage.endsWith("/")) {
+            return rootpage.substring(0, rootpage.length() - 1);
+        }
+        return rootpage;
+    }
+
+    public String getIncludeRoot() {
+        return includeroot == null ? "false" : includeroot;
+    }
 
     public String getPrevious() {
-		if(Boolean.parseBoolean(getDisablePrevious())) {
-			return "unknown";
-		}
-		Resource res = getCurrentPage(getRootResource());
-		//LOG.debug("resource: {}",res);
-		if(res == null) res = getCurrentPage(getResource());
-		PerPage page = res.adaptTo(PerPage.class);
-		if(page == null) return "not adaptable";
-		PerPage prev = page.getPrevious();
-		if(Boolean.parseBoolean(getExcludeSitemapExcludes())) {
-			while(prev != null && prev.getContentProperty(PerConstants.EXCLUDE_FROM_SITEMAP, false)) {
-				prev = prev.getPrevious();
-			}
-		}
-		if(prev != null && !prev.getPath().startsWith(getRootPage())) {
-			prev = null;
-		}
-		if(prev != null && !Boolean.parseBoolean(getIncludeRoot())) {
-			// include root is false, so make sure path isn't equal to root page
-			if(prev.getPath().equals(getRootPage())) {
-				prev = null;
-			}
-		}
-		return prev != null ? prev.getPath(): "unknown";
+        if (Boolean.parseBoolean(getDisablePrevious())) {
+            return "unknown";
+        }
+        Resource res = getCurrentPage(getRootResource());
+        //LOG.debug("resource: {}",res);
+        if (res == null) {
+            res = getCurrentPage(getResource());
+        }
+        PerPage page = res.adaptTo(PerPage.class);
+        if (page == null) {
+            return "not adaptable";
+        }
+        PerPage prev = page.getPrevious();
+        if (Boolean.parseBoolean(getExcludeSitemapExcludes())) {
+            while (prev != null && prev.getContentProperty(PerConstants.EXCLUDE_FROM_SITEMAP, false)) {
+                prev = prev.getPrevious();
+            }
+        }
+        if (prev != null && !prev.getPath().startsWith(getRootPage())) {
+            prev = null;
+        }
+        if (prev != null && !Boolean.parseBoolean(getIncludeRoot())) {
+            // include root is false, so make sure path isn't equal to root page
+            if (prev.getPath().equals(getRootPage())) {
+                prev = null;
+            }
+        }
+        return prev != null ? prev.getPath() : "unknown";
     }
 
     public String getNext() {
-		Resource res = getCurrentPage(getRootResource());
-		if(res == null) res = getCurrentPage(getResource());
-		PerPage page = res.adaptTo(PerPage.class);
-		if(page == null) return "not adaptable";
-		PerPage next = page.getNext();
-		if(Boolean.parseBoolean(getExcludeSitemapExcludes())) {
-			while(next != null && next.getContentProperty(PerConstants.EXCLUDE_FROM_SITEMAP, false)) {
-				next = next.getNext();
-			}
-		}
-		if(next != null && !next.getPath().startsWith(getRootPage())) {
-			next = null;
-		}
-		return next != null ? next.getPath(): "unknown";
-    }
-    
+        Resource res = getCurrentPage(getRootResource());
+        if (res == null) {
+            res = getCurrentPage(getResource());
+        }
+        PerPage page = res.adaptTo(PerPage.class);
+        if (page == null) {
+            return "not adaptable";
+        }
+        PerPage next = page.getNext();
+        if (Boolean.parseBoolean(getExcludeSitemapExcludes())) {
+            while (next != null && next.getContentProperty(PerConstants.EXCLUDE_FROM_SITEMAP, false)) {
+                next = next.getNext();
+            }
+        }
+        if (next != null && !next.getPath().startsWith(getRootPage())) {
+            next = null;
+        }
+        return next != null ? next.getPath() : "unknown";
+    }
+
     private Resource getCurrentPage(Resource resource) {
-      if(resource == null) { return null; }
-      String resourceType = null;
-      try{
-        
-        ValueMap props = resource.adaptTo(ValueMap.class);
-        resourceType = props.get("jcr:primaryType", "type not found");
-        LOG.debug("resource type is: " + resourceType + "  path is:" + resource.getPath());
-        // we only care about per:page node
-        if("per:Page".equals(resourceType)) {
-          LOG.debug("returned resource type is: " + resourceType + "  path is:" + resource.getPath());
-          return resource;
+        if (resource == null) {
+            return null;
         }
-        else {
-          if(resource.getParent() != null) {
-            return getCurrentPage(resource.getParent());
-          }
+        String resourceType = null;
+        try {
+
+            ValueMap props = resource.adaptTo(ValueMap.class);
+            resourceType = props.get("jcr:primaryType", "type not found");
+            LOG.debug("resource type is: " + resourceType + "  path is:" + resource.getPath());
+            // we only care about per:page node
+            if ("per:Page".equals(resourceType)) {
+                LOG.debug("returned resource type is: " + resourceType + "  path is:" + resource.getPath());
+                return resource;
+            } else {
+                if (resource.getParent() != null) {
+                    return getCurrentPage(resource.getParent());
+                }
+            }
+        } catch (Exception e) {
+            LOG.error("Exception: " + e);
         }
-      } catch(Exception e){
-          LOG.error("Exception: " + e);
-      }
-      return null;
+        return null;
     }
 
 }
diff --git a/core/src/main/java/com/themecleanflex/models/QuoteModel.java b/core/src/main/java/com/themecleanflex/models/QuoteModel.java
index 0b0cb49bf..fd1905f57 100644
--- a/core/src/main/java/com/themecleanflex/models/QuoteModel.java
+++ b/core/src/main/java/com/themecleanflex/models/QuoteModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -318,246 +319,248 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/quote",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/quote",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class QuoteModel extends AbstractComponent {
 
-    public QuoteModel(Resource r) { super(r); }
+    public QuoteModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
-	@Inject
-	private String text;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Quote?","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String blockquote;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
+    @Inject
+    private String text;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Quote?","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String blockquote;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Quote?","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getBlockquote() {
-		return blockquote;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Quote?","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getBlockquote() {
+        return blockquote;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/ReferenceModel.java b/core/src/main/java/com/themecleanflex/models/ReferenceModel.java
index 7483f3a58..c5d3a3362 100644
--- a/core/src/main/java/com/themecleanflex/models/ReferenceModel.java
+++ b/core/src/main/java/com/themecleanflex/models/ReferenceModel.java
@@ -2,7 +2,6 @@
 
 import com.fasterxml.jackson.databind.ObjectMapper;
 import com.peregrine.commons.util.PerConstants;
-
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
 import org.apache.sling.api.resource.Resource;
@@ -17,14 +16,13 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import javax.inject.Inject;
 import java.io.IOException;
 import java.io.StringWriter;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.Map;
 
-import javax.inject.Inject;
-
 import static java.util.Objects.isNull;
 
 /*
@@ -336,245 +334,247 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/reference",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/reference",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class ReferenceModel extends AbstractComponent {
 
-    public ReferenceModel(Resource r) { super(r); }
+    public ReferenceModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Reference","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String reference;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-label":"Content Name Reference","x-form-type":"text"} */
-	@Inject
-	private String contentnameref;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Reference","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String reference;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-label":"Content Name Reference","x-form-type":"text"} */
+    @Inject
+    private String contentnameref;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Reference","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getReference() {
-		return reference;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"content","x-form-label":"Content Name Reference","x-form-type":"text"} */
-	public String getContentnameref() {
-		return contentnameref;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Reference","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getReference() {
+        return reference;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"content","x-form-label":"Content Name Reference","x-form-type":"text"} */
+    public String getContentnameref() {
+        return contentnameref;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
@@ -586,82 +586,84 @@ public String getContentname() {
 
     @Inject
     private ModelFactory modelFactory;
-  
+
     public String referenceJson;
-  
+
     public String getReferenceJson() {
-      referenceJson = generateReferenceJson();
-      return  referenceJson;
+        referenceJson = generateReferenceJson();
+        return referenceJson;
     }
-  
+
     private String generateReferenceJson() {
-      if(reference == null || "".equals(reference)) {
-        return null;
-      }
-      ResourceResolver resourceResolver = getResource().getResourceResolver();
-      Resource referencedResource = resourceResolver.getResource(reference+"/jcr:content");
-      if(referencedResource == null) {
-        LOG.error("Reference '{}' does not resolve to a resource.", reference);
-        return null;
-      }
-      try {
-        Map referenceMap = modelFactory.exportModelForResource(referencedResource,
-            PerConstants.JACKSON, Map.class, Collections.<String, String>emptyMap());
-
-        // TODO: finding the node should happen before the export due to the fact that this
-        // could result in a recursion if we point to content on the same page
-        Map result = findNode(referenceMap, "contentname", getContentnameref());
-        if(result != null) {
-          StringWriter writer = new StringWriter();
-          ObjectMapper mapper = new ObjectMapper();
-          mapper.writeValue(writer, result);
-          writer.close();
-          return writer.toString();
-        } else {
-          return null;
+        if (reference == null || "".equals(reference)) {
+            return null;
         }
-      } catch (ExportException e) {
-        LOG.error("Export failed for resource " + reference, e);
-      } catch (MissingExporterException e) {
-        LOG.error("Could not find exporter for resource  " + reference, e);
-      } catch (IOException e) {
-        LOG.error("Failed to write json for resource  " + reference, e);
-      }
-      return null;
+        ResourceResolver resourceResolver = getResource().getResourceResolver();
+        Resource referencedResource = resourceResolver.getResource(reference + "/jcr:content");
+        if (referencedResource == null) {
+            LOG.error("Reference '{}' does not resolve to a resource.", reference);
+            return null;
+        }
+        try {
+            Map referenceMap = modelFactory.exportModelForResource(referencedResource,
+                PerConstants.JACKSON, Map.class, Collections.<String, String>emptyMap());
+
+            // TODO: finding the node should happen before the export due to the fact that this
+            // could result in a recursion if we point to content on the same page
+            Map result = findNode(referenceMap, "contentname", getContentnameref());
+            if (result != null) {
+                StringWriter writer = new StringWriter();
+                ObjectMapper mapper = new ObjectMapper();
+                mapper.writeValue(writer, result);
+                writer.close();
+                return writer.toString();
+            } else {
+                return null;
+            }
+        } catch (ExportException e) {
+            LOG.error("Export failed for resource " + reference, e);
+        } catch (MissingExporterException e) {
+            LOG.error("Could not find exporter for resource  " + reference, e);
+        } catch (IOException e) {
+            LOG.error("Failed to write json for resource  " + reference, e);
+        }
+        return null;
     }
 
     // find a node with the given key/value pair in our json output
     private Map findNode(Map map, String name, String value) {
-      for (Object key : map.keySet()) {
-        Object val = map.get(key);
-        if(equals(key, name)) {
-          if(equals(value, val)) {
-            return map;
-          }
-        }
-        if("children".equals(key) && val instanceof ArrayList) {
-          ArrayList children = (ArrayList) val;
-          for (Object child : children) {
-            if(child instanceof Map) {
-              Map ret = findNode((Map) child, name, value);
-              if(ret != null) return ret;
+        for (Object key : map.keySet()) {
+            Object val = map.get(key);
+            if (equals(key, name)) {
+                if (equals(value, val)) {
+                    return map;
+                }
+            }
+            if ("children".equals(key) && val instanceof ArrayList) {
+                ArrayList children = (ArrayList) val;
+                for (Object child : children) {
+                    if (child instanceof Map) {
+                        Map ret = findNode((Map) child, name, value);
+                        if (ret != null) {
+                            return ret;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
-      return null;
+        return null;
     }
 
     private static boolean equals(final Object obj, final Object other) {
-	    if (obj == other) {
-		    return true;
-	    }
+        if (obj == other) {
+            return true;
+        }
 
-	    if (isNull(obj) || isNull(other)) {
-		    return false;
-	    }
+        if (isNull(obj) || isNull(other)) {
+            return false;
+        }
 
-	    return obj.equals(other);
+        return obj.equals(other);
     }
 
-  }
+}
diff --git a/core/src/main/java/com/themecleanflex/models/RichtextModel.java b/core/src/main/java/com/themecleanflex/models/RichtextModel.java
index 5d1a25e18..2095e40f6 100644
--- a/core/src/main/java/com/themecleanflex/models/RichtextModel.java
+++ b/core/src/main/java/com/themecleanflex/models/RichtextModel.java
@@ -1,8 +1,8 @@
 package com.themecleanflex.models;
 
+import com.peregrine.model.api.ImageInfo;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
@@ -10,8 +10,6 @@
 import org.apache.sling.models.annotations.Model;
 
 import javax.inject.Inject;
-
-import com.peregrine.model.api.ImageInfo;
 import java.awt.Dimension;
 
 /*
@@ -406,311 +404,313 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/richtext",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/richtext",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class RichtextModel extends AbstractComponent {
 
-    public RichtextModel(Resource r) { super(r); }
+    public RichtextModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
-	@Inject
-	private String text;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showmedia;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String mediatype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	@Inject
-	@Default(values ="")
-	private String imagesrc;
-
-	@Inject
-	@ImageInfo(name="imagesrc")
-	private Dimension imagesrcSize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	@Inject
-	@Default(values ="")
-	private String videosrc;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	@Inject
-	private String mediatitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	@Inject
-	@Default(values ="50")
-	private String mediawidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	@Inject
-	@Default(values ="before")
-	private String mediaposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
+    @Inject
+    private String text;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showmedia;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String mediatype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    @Inject
+    @Default(values = "")
+    private String imagesrc;
+
+    @Inject
+    @ImageInfo(name = "imagesrc")
+    private Dimension imagesrcSize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    @Inject
+    @Default(values = "")
+    private String videosrc;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    @Inject
+    private String mediatitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    @Inject
+    @Default(values = "50")
+    private String mediawidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    @Inject
+    @Default(values = "before")
+    private String mediaposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowmedia() {
-		return showmedia;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getMediatype() {
-		return mediatype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	public String getImagesrc() {
-		return imagesrc;
-	}
-
-	public Dimension getImagesrcSize() {
-		return imagesrcSize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	public String getVideosrc() {
-		return videosrc;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	public String getMediatitle() {
-		return mediatitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	public String getMediawidth() {
-		return mediawidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	public String getMediaposition() {
-		return mediaposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"texteditor"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowmedia() {
+        return showmedia;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getMediatype() {
+        return mediatype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    public String getImagesrc() {
+        return imagesrc;
+    }
+
+    public Dimension getImagesrcSize() {
+        return imagesrcSize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    public String getVideosrc() {
+        return videosrc;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    public String getMediatitle() {
+        return mediatitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    public String getMediawidth() {
+        return mediawidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    public String getMediaposition() {
+        return mediaposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/SimpletextModel.java b/core/src/main/java/com/themecleanflex/models/SimpletextModel.java
index eedda7e43..535c374a7 100644
--- a/core/src/main/java/com/themecleanflex/models/SimpletextModel.java
+++ b/core/src/main/java/com/themecleanflex/models/SimpletextModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -344,246 +345,248 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/simpletext",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/simpletext",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class SimpletextModel extends AbstractComponent {
 
-    public SimpletextModel(Resource r) { super(r); }
+    public SimpletextModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String text;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Choose Element Type","x-form-group":"content","x-form-type":"materialselect","x-default":"p","properties":{"h1":{"x-form-name":"h1","x-form-value":"h1"},"h2":{"x-form-name":"h2","x-form-value":"h2"},"h3":{"x-form-name":"h3","x-form-value":"h3"},"h4":{"x-form-name":"h4","x-form-value":"h4"},"h5":{"x-form-name":"h5","x-form-value":"h5"},"p":{"x-form-name":"p","x-form-value":"p"}}} */
-	@Inject
-	@Default(values ="p")
-	private String element;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String text;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Choose Element Type","x-form-group":"content","x-form-type":"materialselect","x-default":"p","properties":{"h1":{"x-form-name":"h1","x-form-value":"h1"},"h2":{"x-form-name":"h2","x-form-value":"h2"},"h3":{"x-form-name":"h3","x-form-value":"h3"},"h4":{"x-form-name":"h4","x-form-value":"h4"},"h5":{"x-form-name":"h5","x-form-value":"h5"},"p":{"x-form-name":"p","x-form-value":"p"}}} */
+    @Inject
+    @Default(values = "p")
+    private String element;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"text"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Choose Element Type","x-form-group":"content","x-form-type":"materialselect","x-default":"p","properties":{"h1":{"x-form-name":"h1","x-form-value":"h1"},"h2":{"x-form-name":"h2","x-form-value":"h2"},"h3":{"x-form-name":"h3","x-form-value":"h3"},"h4":{"x-form-name":"h4","x-form-value":"h4"},"h5":{"x-form-name":"h5","x-form-value":"h5"},"p":{"x-form-name":"p","x-form-value":"p"}}} */
-	public String getElement() {
-		return element;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-group":"content","x-form-type":"text"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Choose Element Type","x-form-group":"content","x-form-type":"materialselect","x-default":"p","properties":{"h1":{"x-form-name":"h1","x-form-value":"h1"},"h2":{"x-form-name":"h2","x-form-value":"h2"},"h3":{"x-form-name":"h3","x-form-value":"h3"},"h4":{"x-form-name":"h4","x-form-value":"h4"},"h5":{"x-form-name":"h5","x-form-value":"h5"},"p":{"x-form-name":"p","x-form-value":"p"}}} */
+    public String getElement() {
+        return element;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/SocialiconsModel.java b/core/src/main/java/com/themecleanflex/models/SocialiconsModel.java
index 1cb549e99..8133267dd 100644
--- a/core/src/main/java/com/themecleanflex/models/SocialiconsModel.java
+++ b/core/src/main/java/com/themecleanflex/models/SocialiconsModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -86,63 +87,65 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/socialicons",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/socialicons",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class SocialiconsModel extends AbstractComponent {
 
-    public SocialiconsModel(Resource r) { super(r); }
+    public SocialiconsModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String iconcustomcolor;
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String iconcustomcolor;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
-	@Inject
-	@Default(values ="#000000")
-	private String iconcolor;
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
+    @Inject
+    @Default(values = "#000000")
+    private String iconcolor;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
-	@Inject
-	@Default(values ="25")
-	private String iconsize;
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
+    @Inject
+    @Default(values = "25")
+    private String iconsize;
 
-	/* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
-	@Inject
-	private List<IComponent> icons;
+    /* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
+    @Inject
+    private List<IComponent> icons;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getIconcustomcolor() {
-		return iconcustomcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
-	public String getIconcolor() {
-		return iconcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
-	public String getIconsize() {
-		return iconsize;
-	}
-
-	/* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
-	public List<IComponent> getIcons() {
-		return icons;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Icons Color","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getIconcustomcolor() {
+        return iconcustomcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Color","x-default":"#000000","x-form-group":"style","x-form-visible":"model.iconcustomcolor == 'true'","x-form-type":"color"} */
+    public String getIconcolor() {
+        return iconcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Icon Size","x-form-group":"style","x-form-type":"materialrange","x-default":"25","x-form-min":0,"x-form-max":150} */
+    public String getIconsize() {
+        return iconsize;
+    }
+
+    /* {"type":"object","x-form-type":"collection","x-form-label":"Icons","x-form-group":"content","x-source":"inject","properties":{"icon":{"type":"string","x-source":"inject","x-form-label":"Icon Name","x-form-type":"text"},"url":{"type":"string","x-source":"inject","x-form-label":"Icon Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"iconalttext":{"type":"string","x-source":"inject","x-form-label":"Icon Alt Text","x-form-type":"text"}}} */
+    public List<IComponent> getIcons() {
+        return icons;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/SpacerModel.java b/core/src/main/java/com/themecleanflex/models/SpacerModel.java
index 97a22d533..34e7278d5 100644
--- a/core/src/main/java/com/themecleanflex/models/SpacerModel.java
+++ b/core/src/main/java/com/themecleanflex/models/SpacerModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -225,170 +226,172 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/spacer",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/spacer",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class SpacerModel extends AbstractComponent {
 
-    public SpacerModel(Resource r) { super(r); }
+    public SpacerModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Height","x-form-group":"content","x-form-type":"materialrange","x-form-min":0,"x-form-max":100} */
-	@Inject
-	private String height;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image Size","x-form-group":"style","x-form-type":"materialselect","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"cover","properties":{"section":{"x-form-name":"cover","x-form-value":"cover"},"article":{"x-form-name":"contain","x-form-value":"contain"},"main":{"x-form-name":"auto","x-form-value":"auto"}}} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-group":"style","x-form-type":"materialswitch","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
+    /* {"type":"string","x-source":"inject","x-form-label":"Height","x-form-group":"content","x-form-type":"materialrange","x-form-min":0,"x-form-max":100} */
+    @Inject
+    private String height;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image Size","x-form-group":"style","x-form-type":"materialselect","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"cover","properties":{"section":{"x-form-name":"cover","x-form-value":"cover"},"article":{"x-form-name":"contain","x-form-value":"contain"},"main":{"x-form-name":"auto","x-form-value":"auto"}}} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-group":"style","x-form-type":"materialswitch","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Height","x-form-group":"content","x-form-type":"materialrange","x-form-min":0,"x-form-max":100} */
-	public String getHeight() {
-		return height;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image Size","x-form-group":"style","x-form-type":"materialselect","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"cover","properties":{"section":{"x-form-name":"cover","x-form-value":"cover"},"article":{"x-form-name":"contain","x-form-value":"contain"},"main":{"x-form-name":"auto","x-form-value":"auto"}}} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-group":"style","x-form-type":"materialswitch","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Height","x-form-group":"content","x-form-type":"materialrange","x-form-min":0,"x-form-max":100} */
+    public String getHeight() {
+        return height;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image Size","x-form-group":"style","x-form-type":"materialselect","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"cover","properties":{"section":{"x-form-name":"cover","x-form-value":"cover"},"article":{"x-form-name":"contain","x-form-value":"contain"},"main":{"x-form-name":"auto","x-form-value":"auto"}}} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-group":"style","x-form-type":"materialswitch","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/TabsModel.java b/core/src/main/java/com/themecleanflex/models/TabsModel.java
index 139fba74f..d336f637f 100644
--- a/core/src/main/java/com/themecleanflex/models/TabsModel.java
+++ b/core/src/main/java/com/themecleanflex/models/TabsModel.java
@@ -1,9 +1,8 @@
 package com.themecleanflex.models;
 
+import com.peregrine.model.api.ImageInfo;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
@@ -11,9 +10,8 @@
 import org.apache.sling.models.annotations.Model;
 
 import javax.inject.Inject;
-
-import com.peregrine.model.api.ImageInfo;
 import java.awt.Dimension;
+import java.util.List;
 
 /*
     //GEN[:DATA
@@ -486,357 +484,359 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/tabs",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/tabs",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class TabsModel extends AbstractComponent {
 
-    public TabsModel(Resource r) { super(r); }
+    public TabsModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-group":"content","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
-	@Inject
-	private String title;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showsubtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-group":"content","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-type":"textarea"} */
-	@Inject
-	private String subtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-default":"before","x-form-visible":"model.showmedia == 'true'","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	@Inject
-	@Default(values ="before")
-	private String mediaposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showmedia;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String mediatype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	@Inject
-	@Default(values ="")
-	private String imagesrc;
-
-	@Inject
-	@ImageInfo(name="imagesrc")
-	private Dimension imagesrcSize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	@Inject
-	@Default(values ="")
-	private String videosrc;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	@Inject
-	private String mediatitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	@Inject
-	@Default(values ="50")
-	private String mediawidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tab Color","x-form-group":"style","x-form-type":"materialselect","x-default":"blue","properties":{"primary":{"x-form-name":"Primary","x-form-value":"blue"},"success":{"x-form-name":"Success","x-form-value":"green"},"danger":{"x-form-name":"Danger","x-form-value":"red"},"warning":{"x-form-name":"Warning","x-form-value":"orange"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="blue")
-	private String tabcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tabs","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Tab Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Tab Text","x-form-type":"texteditor"}}} */
-	@Inject
-	private List<IComponent> tabs;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-group":"content","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
+    @Inject
+    private String title;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showsubtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-group":"content","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-type":"textarea"} */
+    @Inject
+    private String subtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-default":"before","x-form-visible":"model.showmedia == 'true'","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    @Inject
+    @Default(values = "before")
+    private String mediaposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showmedia;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String mediatype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    @Inject
+    @Default(values = "")
+    private String imagesrc;
+
+    @Inject
+    @ImageInfo(name = "imagesrc")
+    private Dimension imagesrcSize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    @Inject
+    @Default(values = "")
+    private String videosrc;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    @Inject
+    private String mediatitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    @Inject
+    @Default(values = "50")
+    private String mediawidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tab Color","x-form-group":"style","x-form-type":"materialselect","x-default":"blue","properties":{"primary":{"x-form-name":"Primary","x-form-value":"blue"},"success":{"x-form-name":"Success","x-form-value":"green"},"danger":{"x-form-name":"Danger","x-form-value":"red"},"warning":{"x-form-name":"Warning","x-form-value":"orange"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "blue")
+    private String tabcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tabs","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Tab Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Tab Text","x-form-type":"texteditor"}}} */
+    @Inject
+    private List<IComponent> tabs;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowtitle() {
-		return showtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-group":"content","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
-	public String getTitle() {
-		return title;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowsubtitle() {
-		return showsubtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-group":"content","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-type":"textarea"} */
-	public String getSubtitle() {
-		return subtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-default":"before","x-form-visible":"model.showmedia == 'true'","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	public String getMediaposition() {
-		return mediaposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowmedia() {
-		return showmedia;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getMediatype() {
-		return mediatype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	public String getImagesrc() {
-		return imagesrc;
-	}
-
-	public Dimension getImagesrcSize() {
-		return imagesrcSize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	public String getVideosrc() {
-		return videosrc;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	public String getMediatitle() {
-		return mediatitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	public String getMediawidth() {
-		return mediawidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tab Color","x-form-group":"style","x-form-type":"materialselect","x-default":"blue","properties":{"primary":{"x-form-name":"Primary","x-form-value":"blue"},"success":{"x-form-name":"Success","x-form-value":"green"},"danger":{"x-form-name":"Danger","x-form-value":"red"},"warning":{"x-form-name":"Warning","x-form-value":"orange"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getTabcolor() {
-		return tabcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tabs","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Tab Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Tab Text","x-form-type":"texteditor"}}} */
-	public List<IComponent> getTabs() {
-		return tabs;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowtitle() {
+        return showtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-group":"content","x-form-visible":"model.showtitle == 'true'","x-form-type":"text"} */
+    public String getTitle() {
+        return title;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowsubtitle() {
+        return showsubtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-group":"content","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-type":"textarea"} */
+    public String getSubtitle() {
+        return subtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-default":"before","x-form-visible":"model.showmedia == 'true'","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    public String getMediaposition() {
+        return mediaposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowmedia() {
+        return showmedia;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getMediatype() {
+        return mediatype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    public String getImagesrc() {
+        return imagesrc;
+    }
+
+    public Dimension getImagesrcSize() {
+        return imagesrcSize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    public String getVideosrc() {
+        return videosrc;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    public String getMediatitle() {
+        return mediatitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    public String getMediawidth() {
+        return mediawidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tab Color","x-form-group":"style","x-form-type":"materialselect","x-default":"blue","properties":{"primary":{"x-form-name":"Primary","x-form-value":"blue"},"success":{"x-form-name":"Success","x-form-value":"green"},"danger":{"x-form-name":"Danger","x-form-value":"red"},"warning":{"x-form-name":"Warning","x-form-value":"orange"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getTabcolor() {
+        return tabcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tabs","x-form-group":"content","x-form-type":"collection","properties":{"title":{"type":"string","x-source":"inject","x-form-label":"Tab Title","x-form-type":"text"},"text":{"type":"string","x-source":"inject","x-form-label":"Tab Text","x-form-type":"texteditor"}}} */
+    public List<IComponent> getTabs() {
+        return tabs;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/TagsModel.java b/core/src/main/java/com/themecleanflex/models/TagsModel.java
index 60bcabc0c..2cc547fd0 100644
--- a/core/src/main/java/com/themecleanflex/models/TagsModel.java
+++ b/core/src/main/java/com/themecleanflex/models/TagsModel.java
@@ -2,13 +2,14 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+
 /*
     //GEN[:DATA
     {
@@ -348,255 +349,257 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/tags",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/tags",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class TagsModel extends AbstractComponent {
 
-    public TagsModel(Resource r) { super(r); }
+    public TagsModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Tags Label","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String tagslabel;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tag Color","x-form-type":"materialselect","x-form-group":"style","x-default":"blue","properties":{"note":{"x-form-name":"Blue","x-form-value":"blue"},"tip":{"x-form-name":"Green","x-form-value":"green"},"important":{"x-form-name":"Orange","x-form-value":"orange"},"caution":{"x-form-name":"Red","x-form-value":"red"},"warning":{"x-form-name":"Yellow","x-form-value":"yellow"}}} */
-	@Inject
-	@Default(values ="blue")
-	private String tagcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tag Link Base Path","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	@Inject
-	private String pagelink;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Tags Label","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String tagslabel;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tag Color","x-form-type":"materialselect","x-form-group":"style","x-default":"blue","properties":{"note":{"x-form-name":"Blue","x-form-value":"blue"},"tip":{"x-form-name":"Green","x-form-value":"green"},"important":{"x-form-name":"Orange","x-form-value":"orange"},"caution":{"x-form-name":"Red","x-form-value":"red"},"warning":{"x-form-name":"Yellow","x-form-value":"yellow"}}} */
+    @Inject
+    @Default(values = "blue")
+    private String tagcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tag Link Base Path","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    @Inject
+    private String pagelink;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Tags Label","x-form-group":"content","x-form-type":"text"} */
-	public String getTagslabel() {
-		return tagslabel;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tag Color","x-form-type":"materialselect","x-form-group":"style","x-default":"blue","properties":{"note":{"x-form-name":"Blue","x-form-value":"blue"},"tip":{"x-form-name":"Green","x-form-value":"green"},"important":{"x-form-name":"Orange","x-form-value":"orange"},"caution":{"x-form-name":"Red","x-form-value":"red"},"warning":{"x-form-name":"Yellow","x-form-value":"yellow"}}} */
-	public String getTagcolor() {
-		return tagcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Tag Link Base Path","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
-	public String getPagelink() {
-		return pagelink;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Tags Label","x-form-group":"content","x-form-type":"text"} */
+    public String getTagslabel() {
+        return tagslabel;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tag Color","x-form-type":"materialselect","x-form-group":"style","x-default":"blue","properties":{"note":{"x-form-name":"Blue","x-form-value":"blue"},"tip":{"x-form-name":"Green","x-form-value":"green"},"important":{"x-form-name":"Orange","x-form-value":"orange"},"caution":{"x-form-name":"Red","x-form-value":"red"},"warning":{"x-form-name":"Yellow","x-form-value":"yellow"}}} */
+    public String getTagcolor() {
+        return tagcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Tag Link Base Path","x-form-group":"content","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"} */
+    public String getPagelink() {
+        return pagelink;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/TeaserhorizontalModel.java b/core/src/main/java/com/themecleanflex/models/TeaserhorizontalModel.java
index f61ed0f01..d0a26fa27 100644
--- a/core/src/main/java/com/themecleanflex/models/TeaserhorizontalModel.java
+++ b/core/src/main/java/com/themecleanflex/models/TeaserhorizontalModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -499,348 +500,350 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/teaserhorizontal",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/teaserhorizontal",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class TeaserhorizontalModel extends AbstractComponent {
 
-    public TeaserhorizontalModel(Resource r) { super(r); }
+    public TeaserhorizontalModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-group":"style","x-form-type":"materialradio","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
-	@Inject
-	@Default(values ="center")
-	private String aligncontent;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-group":"style","x-form-type":"materialswitch","x-form-default":"false"} */
-	@Inject
-	private String isprimary;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Title","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String title;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Subtitle","x-form-type":"materialswitch"} */
-	@Inject
-	private String showsubtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-group":"content","x-form-type":"textarea"} */
-	@Inject
-	private String subtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Text","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtext;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
-	@Inject
-	private String text;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Text Width","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-default":100} */
-	@Inject
-	@Default(values ="100")
-	private String textwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Button","x-form-type":"materialswitch"} */
-	@Inject
-	private String showbutton;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Position","x-form-type":"materialradio","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"right","properties":{"left":{"x-form-name":"Before Content","x-form-value":"left"},"right":{"x-form-name":"After Content","x-form-value":"right"}}} */
-	@Inject
-	@Default(values ="right")
-	private String buttonside;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	@Inject
-	@Default(values ="default")
-	private String buttonsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	@Inject
-	private List<IComponent> buttons;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-group":"style","x-form-type":"materialradio","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
+    @Inject
+    @Default(values = "center")
+    private String aligncontent;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-group":"style","x-form-type":"materialswitch","x-form-default":"false"} */
+    @Inject
+    private String isprimary;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Title","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String title;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Subtitle","x-form-type":"materialswitch"} */
+    @Inject
+    private String showsubtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-group":"content","x-form-type":"textarea"} */
+    @Inject
+    private String subtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Text","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtext;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
+    @Inject
+    private String text;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Text Width","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-default":100} */
+    @Inject
+    @Default(values = "100")
+    private String textwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Button","x-form-type":"materialswitch"} */
+    @Inject
+    private String showbutton;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Position","x-form-type":"materialradio","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"right","properties":{"left":{"x-form-name":"Before Content","x-form-value":"left"},"right":{"x-form-name":"After Content","x-form-value":"right"}}} */
+    @Inject
+    @Default(values = "right")
+    private String buttonside;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    @Inject
+    @Default(values = "default")
+    private String buttonsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    @Inject
+    private List<IComponent> buttons;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-group":"style","x-form-type":"materialradio","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
-	public String getAligncontent() {
-		return aligncontent;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-group":"style","x-form-type":"materialswitch","x-form-default":"false"} */
-	public String getIsprimary() {
-		return isprimary;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Title","x-form-type":"materialswitch"} */
-	public String getShowtitle() {
-		return showtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
-	public String getTitle() {
-		return title;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Subtitle","x-form-type":"materialswitch"} */
-	public String getShowsubtitle() {
-		return showsubtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-group":"content","x-form-type":"textarea"} */
-	public String getSubtitle() {
-		return subtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Text","x-form-type":"materialswitch"} */
-	public String getShowtext() {
-		return showtext;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Text Width","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-default":100} */
-	public String getTextwidth() {
-		return textwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Button","x-form-type":"materialswitch"} */
-	public String getShowbutton() {
-		return showbutton;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Position","x-form-type":"materialradio","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"right","properties":{"left":{"x-form-name":"Before Content","x-form-value":"left"},"right":{"x-form-name":"After Content","x-form-value":"right"}}} */
-	public String getButtonside() {
-		return buttonside;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	public String getButtonsize() {
-		return buttonsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	public List<IComponent> getButtons() {
-		return buttons;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-group":"style","x-form-type":"materialradio","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
+    public String getAligncontent() {
+        return aligncontent;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-group":"style","x-form-type":"materialswitch","x-form-default":"false"} */
+    public String getIsprimary() {
+        return isprimary;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Title","x-form-type":"materialswitch"} */
+    public String getShowtitle() {
+        return showtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
+    public String getTitle() {
+        return title;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Subtitle","x-form-type":"materialswitch"} */
+    public String getShowsubtitle() {
+        return showsubtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-rows":3,"x-form-group":"content","x-form-type":"textarea"} */
+    public String getSubtitle() {
+        return subtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Text","x-form-type":"materialswitch"} */
+    public String getShowtext() {
+        return showtext;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Text Width","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-default":100} */
+    public String getTextwidth() {
+        return textwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-group":"style","x-form-label":"Show Button","x-form-type":"materialswitch"} */
+    public String getShowbutton() {
+        return showbutton;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Position","x-form-type":"materialradio","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"right","properties":{"left":{"x-form-name":"Before Content","x-form-value":"left"},"right":{"x-form-name":"After Content","x-form-value":"right"}}} */
+    public String getButtonside() {
+        return buttonside;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    public String getButtonsize() {
+        return buttonsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-group":"content","x-form-type":"collection","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    public List<IComponent> getButtons() {
+        return buttons;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/TeaserverticalModel.java b/core/src/main/java/com/themecleanflex/models/TeaserverticalModel.java
index 8a9146e4b..4a4448619 100644
--- a/core/src/main/java/com/themecleanflex/models/TeaserverticalModel.java
+++ b/core/src/main/java/com/themecleanflex/models/TeaserverticalModel.java
@@ -3,9 +3,6 @@
 import com.peregrine.model.api.ImageInfo;
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
@@ -13,9 +10,8 @@
 import org.apache.sling.models.annotations.Model;
 
 import javax.inject.Inject;
-
-import com.peregrine.model.api.ImageInfo;
 import java.awt.Dimension;
+import java.util.List;
 
 /*
     //GEN[:DATA
@@ -605,423 +601,425 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/teaservertical",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/teaservertical",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class TeaserverticalModel extends AbstractComponent {
 
-    public TeaserverticalModel(Resource r) { super(r); }
+    public TeaserverticalModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-type":"materialradio","x-default":"center","x-form-group":"style","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
-	@Inject
-	@Default(values ="center")
-	private String aligncontent;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-type":"materialswitch","x-form-group":"style","x-form-default":"false"} */
-	@Inject
-	private String isprimary;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
-	@Inject
-	private String title;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showsubtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-group":"content","x-form-rows":3,"x-form-type":"textarea"} */
-	@Inject
-	private String subtitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Text","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showtext;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
-	@Inject
-	private String text;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Text Width","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-default":100} */
-	@Inject
-	@Default(values ="100")
-	private String textwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Button","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showbutton;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-visible":"","x-form-type":"materialradio","x-form-group":"style","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"end"}}} */
-	@Inject
-	@Default(values ="center")
-	private String alignbuttons;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-default":"default","x-form-group":"style","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	@Inject
-	@Default(values ="default")
-	private String buttonsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-type":"collection","x-form-group":"content","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	@Inject
-	private List<IComponent> buttons;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	@Inject
-	private String showmedia;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String mediatype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	@Inject
-	@Default(values ="")
-	private String imagesrc;
-
-	@Inject
-	@ImageInfo(name="imagesrc")
-	private Dimension imagesrcSize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	@Inject
-	@Default(values ="")
-	private String videosrc;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	@Inject
-	private String mediatitle;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	@Inject
-	@Default(values ="50")
-	private String mediawidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	@Inject
-	@Default(values ="before")
-	private String mediaposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String anchorname;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String extraclasses;
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	@Inject
-	@Default(values ="section")
-	private String htmlelement;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="")
-	private String colorscheme;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String custombackground;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	@Inject
-	private String backgroundtype;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	@Default(values ="https://www.youtube.com/embed/Ju86mknumYM")
-	private String bgvideo;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	@Inject
-	private String bgimage;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgxposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String bgyposition;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	@Inject
-	@Default(values ="cover")
-	private String bgsize;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	@Inject
-	private String overlay;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String overlaycolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	@Inject
-	@Default(values ="50")
-	private String overlayopacity;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	@Inject
-	@Default(values ="#ffffff")
-	private String bgcolor;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	@Inject
-	@Default(values ="#c0c0c0")
-	private String color2;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	@Inject
-	@Default(values ="default")
-	private String blockwidth;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	@Inject
-	@Default(values ="false")
-	private String fullheight;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String toppadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	@Inject
-	private String bottompadding;
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	@Inject
-	private String contentname;
+    /* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-type":"materialradio","x-default":"center","x-form-group":"style","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
+    @Inject
+    @Default(values = "center")
+    private String aligncontent;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-type":"materialswitch","x-form-group":"style","x-form-default":"false"} */
+    @Inject
+    private String isprimary;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
+    @Inject
+    private String title;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showsubtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-group":"content","x-form-rows":3,"x-form-type":"textarea"} */
+    @Inject
+    private String subtitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Text","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showtext;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
+    @Inject
+    private String text;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Text Width","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-default":100} */
+    @Inject
+    @Default(values = "100")
+    private String textwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Button","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showbutton;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-visible":"","x-form-type":"materialradio","x-form-group":"style","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"end"}}} */
+    @Inject
+    @Default(values = "center")
+    private String alignbuttons;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-default":"default","x-form-group":"style","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    @Inject
+    @Default(values = "default")
+    private String buttonsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-type":"collection","x-form-group":"content","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    @Inject
+    private List<IComponent> buttons;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    @Inject
+    private String showmedia;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String mediatype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    @Inject
+    @Default(values = "")
+    private String imagesrc;
+
+    @Inject
+    @ImageInfo(name = "imagesrc")
+    private Dimension imagesrcSize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    @Inject
+    @Default(values = "")
+    private String videosrc;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    @Inject
+    private String mediatitle;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    @Inject
+    @Default(values = "50")
+    private String mediawidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    @Inject
+    @Default(values = "before")
+    private String mediaposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String anchorname;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String extraclasses;
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    @Inject
+    @Default(values = "section")
+    private String htmlelement;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "")
+    private String colorscheme;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String custombackground;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    @Inject
+    private String backgroundtype;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    @Default(values = "https://www.youtube.com/embed/Ju86mknumYM")
+    private String bgvideo;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    @Inject
+    private String bgimage;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgxposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String bgyposition;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    @Inject
+    @Default(values = "cover")
+    private String bgsize;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    @Inject
+    private String overlay;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String overlaycolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    @Inject
+    @Default(values = "50")
+    private String overlayopacity;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    @Inject
+    @Default(values = "#ffffff")
+    private String bgcolor;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    @Inject
+    @Default(values = "#c0c0c0")
+    private String color2;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    @Inject
+    @Default(values = "default")
+    private String blockwidth;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    @Inject
+    @Default(values = "false")
+    private String fullheight;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String toppadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    @Inject
+    private String bottompadding;
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    @Inject
+    private String contentname;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-type":"materialradio","x-default":"center","x-form-group":"style","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
-	public String getAligncontent() {
-		return aligncontent;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-type":"materialswitch","x-form-group":"style","x-form-default":"false"} */
-	public String getIsprimary() {
-		return isprimary;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowtitle() {
-		return showtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
-	public String getTitle() {
-		return title;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowsubtitle() {
-		return showsubtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-group":"content","x-form-rows":3,"x-form-type":"textarea"} */
-	public String getSubtitle() {
-		return subtitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Text","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowtext() {
-		return showtext;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
-	public String getText() {
-		return text;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Text Width","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-default":100} */
-	public String getTextwidth() {
-		return textwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Button","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowbutton() {
-		return showbutton;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-visible":"","x-form-type":"materialradio","x-form-group":"style","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"end"}}} */
-	public String getAlignbuttons() {
-		return alignbuttons;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-default":"default","x-form-group":"style","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
-	public String getButtonsize() {
-		return buttonsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-type":"collection","x-form-group":"content","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
-	public List<IComponent> getButtons() {
-		return buttons;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
-	public String getShowmedia() {
-		return showmedia;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getMediatype() {
-		return mediatype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
-	public String getImagesrc() {
-		return imagesrc;
-	}
-
-	public Dimension getImagesrcSize() {
-		return imagesrcSize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
-	public String getVideosrc() {
-		return videosrc;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
-	public String getMediatitle() {
-		return mediatitle;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
-	public String getMediawidth() {
-		return mediawidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
-	public String getMediaposition() {
-		return mediaposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getAnchorname() {
-		return anchorname;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
-	public String getExtraclasses() {
-		return extraclasses;
-	}
-
-	/* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
-	public String getHtmlelement() {
-		return htmlelement;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getColorscheme() {
-		return colorscheme;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
-	public String getCustombackground() {
-		return custombackground;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
-	public String getBackgroundtype() {
-		return backgroundtype;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgvideo() {
-		return bgvideo;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
-	public String getBgimage() {
-		return bgimage;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgxposition() {
-		return bgxposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getBgyposition() {
-		return bgyposition;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
-	public String getBgsize() {
-		return bgsize;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
-	public String getOverlay() {
-		return overlay;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getOverlaycolor() {
-		return overlaycolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
-	public String getOverlayopacity() {
-		return overlayopacity;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
-	public String getBgcolor() {
-		return bgcolor;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
-	public String getColor2() {
-		return color2;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
-	public String getBlockwidth() {
-		return blockwidth;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
-	public String getFullheight() {
-		return fullheight;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getToppadding() {
-		return toppadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
-	public String getBottompadding() {
-		return bottompadding;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
-	public String getContentname() {
-		return contentname;
-	}
+    /* {"type":"string","x-source":"inject","x-form-label":"Align Content","x-form-type":"materialradio","x-default":"center","x-form-group":"style","properties":{"left":{"x-form-name":"Left","x-form-value":"left"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"right"}}} */
+    public String getAligncontent() {
+        return aligncontent;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Enlarge Text","x-form-type":"materialswitch","x-form-group":"style","x-form-default":"false"} */
+    public String getIsprimary() {
+        return isprimary;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Title","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowtitle() {
+        return showtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Title","x-form-visible":"model.showtitle == 'true'","x-form-group":"content","x-form-type":"text"} */
+    public String getTitle() {
+        return title;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Subtitle","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowsubtitle() {
+        return showsubtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Subtitle","x-form-visible":"model.showsubtitle == 'true'","x-form-group":"content","x-form-rows":3,"x-form-type":"textarea"} */
+    public String getSubtitle() {
+        return subtitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Text","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowtext() {
+        return showtext;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Text","x-form-visible":"model.showtext == 'true'","x-form-group":"content","x-form-type":"texteditor"} */
+    public String getText() {
+        return text;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Text Width","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-default":100} */
+    public String getTextwidth() {
+        return textwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Button","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowbutton() {
+        return showbutton;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Alignment","x-form-visible":"","x-form-type":"materialradio","x-form-group":"style","x-default":"center","properties":{"left":{"x-form-name":"Left","x-form-value":"start"},"center":{"x-form-name":"Center","x-form-value":"center"},"right":{"x-form-name":"Right","x-form-value":"end"}}} */
+    public String getAlignbuttons() {
+        return alignbuttons;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Button Size","x-form-type":"materialselect","x-form-visible":"model.showbutton == 'true'","x-default":"default","x-form-group":"style","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"large":{"x-form-name":"Large","x-form-value":"large"},"small":{"x-form-name":"Small","x-form-value":"small"}}} */
+    public String getButtonsize() {
+        return buttonsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Buttons","x-form-type":"collection","x-form-group":"content","x-form-visible":"model.showbutton == 'true'","properties":{"buttontext":{"type":"string","x-source":"inject","x-form-label":"Button Text","x-form-type":"text"},"buttonlink":{"type":"string","x-source":"inject","x-form-label":"Button Link","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"},"buttoncolor":{"type":"string","x-source":"inject","x-form-label":"Button Color","x-form-type":"materialselect","x-default":"primary","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"secondary":{"x-form-name":"Secondary","x-form-value":"secondary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"info":{"x-form-name":"Info","x-form-value":"info"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}}}} */
+    public List<IComponent> getButtons() {
+        return buttons;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Show Media","x-form-group":"style","x-form-type":"materialswitch"} */
+    public String getShowmedia() {
+        return showmedia;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media type","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"materialradio","properties":{"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getMediatype() {
+        return mediatype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Image Source","x-form-visible":"model.mediatype == 'image' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":"","x-annotate":"size"} */
+    public String getImagesrc() {
+        return imagesrc;
+    }
+
+    public Dimension getImagesrcSize() {
+        return imagesrcSize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Video Source","x-form-visible":"model.mediatype == 'video' and model.showmedia == 'true'","x-form-group":"style","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/assets","x-default":""} */
+    public String getVideosrc() {
+        return videosrc;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Alt Text/Title","x-form-visible":"model.showmedia == 'true'","x-form-group":"style","x-form-type":"text"} */
+    public String getMediatitle() {
+        return mediatitle;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Width","x-form-group":"style","x-form-type":"materialrange","x-form-visible":"model.showmedia == 'true'","x-default":50,"x-form-min":10,"x-form-max":100} */
+    public String getMediawidth() {
+        return mediawidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Media Position","x-form-type":"materialradio","x-form-group":"style","x-form-visible":"model.showmedia == 'true'","x-default":"before","properties":{"type1":{"x-form-name":"Before Content","x-form-value":"before"},"type2":{"x-form-name":"After Content","x-form-value":"after"}}} */
+    public String getMediaposition() {
+        return mediaposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getAnchorname() {
+        return anchorname;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-group":"advanced","x-form-type":"text"} */
+    public String getExtraclasses() {
+        return extraclasses;
+    }
+
+    /* {"type":"string","x-form-group":"advanced","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */
+    public String getHtmlelement() {
+        return htmlelement;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-form-group":"style","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getColorscheme() {
+        return colorscheme;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-group":"style","x-form-type":"materialswitch","x-default":"false"} */
+    public String getCustombackground() {
+        return custombackground;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-group":"style","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */
+    public String getBackgroundtype() {
+        return backgroundtype;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-group":"style","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgvideo() {
+        return bgvideo;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */
+    public String getBgimage() {
+        return bgimage;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-group":"style","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgxposition() {
+        return bgxposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getBgyposition() {
+        return bgyposition;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-form-group":"style","x-default":"cover"} */
+    public String getBgsize() {
+        return bgsize;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-group":"style","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */
+    public String getOverlay() {
+        return overlay;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-group":"style","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getOverlaycolor() {
+        return overlaycolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-group":"style","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */
+    public String getOverlayopacity() {
+        return overlayopacity;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-group":"style","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */
+    public String getBgcolor() {
+        return bgcolor;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-group":"style","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */
+    public String getColor2() {
+        return color2;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-form-group":"style","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */
+    public String getBlockwidth() {
+        return blockwidth;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-form-group":"style","x-default":"false"} */
+    public String getFullheight() {
+        return fullheight;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getToppadding() {
+        return toppadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-group":"style","x-form-visible":"model.fullheight != 'true'"} */
+    public String getBottompadding() {
+        return bottompadding;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-group":"advanced","x-form-type":"text"} */
+    public String getContentname() {
+        return contentname;
+    }
 
 
 //GEN]
diff --git a/core/src/main/java/com/themecleanflex/models/TextlinksModel.java b/core/src/main/java/com/themecleanflex/models/TextlinksModel.java
index 4980cecd6..09b55b8ab 100644
--- a/core/src/main/java/com/themecleanflex/models/TextlinksModel.java
+++ b/core/src/main/java/com/themecleanflex/models/TextlinksModel.java
@@ -2,14 +2,15 @@
 
 import com.peregrine.nodetypes.models.AbstractComponent;
 import com.peregrine.nodetypes.models.IComponent;
-import java.util.List;
-import javax.inject.Inject;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Default;
 import org.apache.sling.models.annotations.DefaultInjectionStrategy;
 import org.apache.sling.models.annotations.Exporter;
 import org.apache.sling.models.annotations.Model;
 
+import javax.inject.Inject;
+import java.util.List;
+
 /*
     //GEN[:DATA
     {
@@ -88,44 +89,46 @@
 
 //GEN[:DEF
 @Model(
-        adaptables = Resource.class,
-        resourceType = "themecleanflex/components/textlinks",
-        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
-        adapters = IComponent.class
+    adaptables = Resource.class,
+    resourceType = "themecleanflex/components/textlinks",
+    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL,
+    adapters = IComponent.class
 )
 @Exporter(
-        name = "jackson",
-        extensions = "json"
+    name = "jackson",
+    extensions = "json"
 )
 
 //GEN]
 public class TextlinksModel extends AbstractComponent {
 
-    public TextlinksModel(Resource r) { super(r); }
+    public TextlinksModel(Resource r) {
+        super(r);
+    }
 
     //GEN[:INJECT
-    	/* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
-	@Inject
-	private List<IComponent> links;
+    /* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
+    @Inject
+    private List<IComponent> links;
 
-	/* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	@Inject
-	@Default(values ="text-blue-800")
-	private String linkcolor;
+    /* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    @Inject
+    @Default(values = "text-blue-800")
+    private String linkcolor;
 
 
 //GEN]
 
     //GEN[:GETTERS
-    	/* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
-	public List<IComponent> getLinks() {
-		return links;
-	}
-
-	/* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
-	public String getLinkcolor() {
-		return linkcolor;
-	}
+    /* {"type":"object","x-source":"inject","x-form-group":"content","x-form-type":"collection","x-form-label":"Links","properties":{"text":{"type":"string","x-source":"inject","x-form-label":"Link Text","x-form-type":"text"},"link":{"type":"string","x-source":"inject","x-form-label":"Link Url","x-form-type":"pathbrowser","x-form-browserRoot":"/content/themecleanflex/pages"}}} */
+    public List<IComponent> getLinks() {
+        return links;
+    }
+
+    /* {"type":"string","x-source":"inject","x-form-label":"Link Color","x-form-group":"style","x-form-type":"materialselect","x-default":"text-blue-800","properties":{"primary":{"x-form-name":"Primary","x-form-value":"primary"},"success":{"x-form-name":"Success","x-form-value":"success"},"danger":{"x-form-name":"Danger","x-form-value":"danger"},"warning":{"x-form-name":"Warning","x-form-value":"warning"},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */
+    public String getLinkcolor() {
+        return linkcolor;
+    }
 
 
 //GEN]
diff --git a/peregrine-cms.codestyle.intellij.xml b/peregrine-cms.codestyle.intellij.xml
new file mode 100644
index 000000000..03cb97c85
--- /dev/null
+++ b/peregrine-cms.codestyle.intellij.xml
@@ -0,0 +1,96 @@
+<code_scheme name="peregrine-cms" version="173">
+  <CssCodeStyleSettings>
+    <option name="HEX_COLOR_LOWER_CASE" value="true" />
+    <option name="HEX_COLOR_LONG_FORMAT" value="true" />
+  </CssCodeStyleSettings>
+  <HTMLCodeStyleSettings>
+    <option name="HTML_ALIGN_TEXT" value="true" />
+  </HTMLCodeStyleSettings>
+  <JSCodeStyleSettings version="0">
+    <option name="FORCE_SEMICOLON_STYLE" value="true" />
+    <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+    <option name="USE_DOUBLE_QUOTES" value="false" />
+    <option name="FORCE_QUOTE_STYlE" value="true" />
+    <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+    <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+    <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    <option name="SPACES_WITHIN_INTERPOLATION_EXPRESSIONS" value="true" />
+  </JSCodeStyleSettings>
+  <JavaCodeStyleSettings>
+    <option name="CLASS_COUNT_TO_USE_IMPORT_ON_DEMAND" value="99999" />
+    <option name="NAMES_COUNT_TO_USE_IMPORT_ON_DEMAND" value="99999" />
+    <option name="PACKAGES_TO_USE_IMPORT_ON_DEMAND">
+      <value />
+    </option>
+    <option name="RECORD_COMPONENTS_WRAP" value="5" />
+  </JavaCodeStyleSettings>
+  <TypeScriptCodeStyleSettings version="0">
+    <option name="FORCE_SEMICOLON_STYLE" value="true" />
+    <option name="USE_DOUBLE_QUOTES" value="false" />
+    <option name="FORCE_QUOTE_STYlE" value="true" />
+    <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+    <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+    <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    <option name="SPACES_WITHIN_INTERPOLATION_EXPRESSIONS" value="true" />
+  </TypeScriptCodeStyleSettings>
+  <XML>
+    <option name="XML_TEXT_WRAP" value="0" />
+  </XML>
+  <codeStyleSettings language="CSS">
+    <indentOptions>
+      <option name="CONTINUATION_INDENT_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+  <codeStyleSettings language="HTML">
+    <indentOptions>
+      <option name="CONTINUATION_INDENT_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+  <codeStyleSettings language="JAVA">
+    <option name="BLANK_LINES_AFTER_IMPORTS" value="2" />
+    <option name="ALIGN_MULTILINE_CHAINED_METHODS" value="true" />
+    <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
+    <option name="METHOD_CALL_CHAIN_WRAP" value="5" />
+    <option name="IF_BRACE_FORCE" value="3" />
+    <option name="ENUM_CONSTANTS_WRAP" value="5" />
+    <indentOptions>
+      <option name="CONTINUATION_INDENT_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+  <codeStyleSettings language="JavaScript">
+    <option name="BLANK_LINES_AFTER_IMPORTS" value="2" />
+  </codeStyleSettings>
+  <codeStyleSettings language="LESS">
+    <indentOptions>
+      <option name="INDENT_SIZE" value="4" />
+      <option name="CONTINUATION_INDENT_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+  <codeStyleSettings language="SASS">
+    <indentOptions>
+      <option name="INDENT_SIZE" value="4" />
+      <option name="CONTINUATION_INDENT_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+  <codeStyleSettings language="SCSS">
+    <indentOptions>
+      <option name="INDENT_SIZE" value="4" />
+      <option name="CONTINUATION_INDENT_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+  <codeStyleSettings language="TypeScript">
+    <option name="BLANK_LINES_AFTER_IMPORTS" value="2" />
+  </codeStyleSettings>
+  <codeStyleSettings language="Vue">
+    <indentOptions>
+      <option name="INDENT_SIZE" value="4" />
+      <option name="TAB_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+  <codeStyleSettings language="XML">
+    <option name="WRAP_ON_TYPING" value="0" />
+    <indentOptions>
+      <option name="CONTINUATION_INDENT_SIZE" value="4" />
+    </indentOptions>
+  </codeStyleSettings>
+</code_scheme>
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index f3b8de6f9..4d2163b72 100644
--- a/pom.xml
+++ b/pom.xml
@@ -16,7 +16,9 @@
     KIND, either express or implied.  See the License for the
     specific language governing permissions and limitations
     under the License.
---><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 
     <modelVersion>4.0.0</modelVersion>
 
@@ -434,8 +436,8 @@
 
         </dependencies>
     </dependencyManagement>
-  <modules>
-    <module>core</module>
-    <module>ui.apps</module>
-  </modules>
+    <modules>
+        <module>core</module>
+        <module>ui.apps</module>
+    </modules>
 </project>
diff --git a/ui.apps/src/main/content/META-INF/vault/filter.xml b/ui.apps/src/main/content/META-INF/vault/filter.xml
index 09c92b220..71807f51f 100644
--- a/ui.apps/src/main/content/META-INF/vault/filter.xml
+++ b/ui.apps/src/main/content/META-INF/vault/filter.xml
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
-  <filter root="/content/themecleanflex">
-    <exclude pattern="/content/themecleanflex/objects/tags/.*"/>
-  </filter>
-  <filter root="/etc/felibs/themecleanflex"/>
-  <filter root="/apps/themecleanflex">
-    <exclude pattern="/apps/themecleanflex/install/.*"/>
-  </filter>
+    <filter root="/content/themecleanflex">
+        <exclude pattern="/content/themecleanflex/objects/tags/.*"/>
+    </filter>
+    <filter root="/etc/felibs/themecleanflex"/>
+    <filter root="/apps/themecleanflex">
+        <exclude pattern="/apps/themecleanflex/install/.*"/>
+    </filter>
 </workspaceFilter>
diff --git a/ui.apps/src/main/content/META-INF/vault/settings.xml b/ui.apps/src/main/content/META-INF/vault/settings.xml
index 9dddd3f76..92857060d 100644
--- a/ui.apps/src/main/content/META-INF/vault/settings.xml
+++ b/ui.apps/src/main/content/META-INF/vault/settings.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <vault version="1.0">
-  <ignore name=".svn"/>
-  <ignore name=".git"/>
+    <ignore name=".svn"/>
+    <ignore name=".git"/>
 </vault>
diff --git a/ui.apps/src/main/content/buildscripts/buildicons.js b/ui.apps/src/main/content/buildscripts/buildicons.js
index 53ba35d34..939c6ce95 100644
--- a/ui.apps/src/main/content/buildscripts/buildicons.js
+++ b/ui.apps/src/main/content/buildscripts/buildicons.js
@@ -8,27 +8,27 @@ var SVGSpriter = require('svg-sprite'),
         dest: 'out',
         mode: {
             symbol: {
-              inline: true
-            }
-        }
-    })
+                inline: true,
+            },
+        },
+    });
 
 var basePath = path.resolve('./src/main/content/jcr_root');
 var iconPath = basePath + '/content/themecleanflex/assets/icons';
 
 // Find SVG files recursively via `glob`
-glob.glob('**/*.svg', { cwd: iconPath }, function (err, files) {
-    files.forEach(function (file) {
+glob.glob('**/*.svg', { cwd: iconPath }, function(err, files) {
+    files.forEach(function(file) {
 
         // Create and add a vinyl file instance for each SVG
         spriter.add(new File({
             path: path.join(iconPath, file),                      // Absolute path to the SVG file
             base: iconPath,                                       // Base path (see `name` argument)
-            contents: fs.readFileSync(path.join(iconPath, file))  // SVG file contents
+            contents: fs.readFileSync(path.join(iconPath, file)),  // SVG file contents
         }));
-    })
+    });
 
-    spriter.compile(function (error, result, data) {
-      fs.writeFileSync(basePath + '/apps/themecleanflex/components/page/iconsprites.html', result.symbol.sprite.contents);
+    spriter.compile(function(error, result, data) {
+        fs.writeFileSync(basePath + '/apps/themecleanflex/components/page/iconsprites.html', result.symbol.sprite.contents);
     });
 });
diff --git a/ui.apps/src/main/content/buildscripts/buildvue.js b/ui.apps/src/main/content/buildscripts/buildvue.js
index b86d31dab..c355d1ab3 100644
--- a/ui.apps/src/main/content/buildscripts/buildvue.js
+++ b/ui.apps/src/main/content/buildscripts/buildvue.js
@@ -1,35 +1,35 @@
-const process   = require('process')
-const fs        = require('fs-extra')
-
-const rollup    = require( 'rollup' )
-const path      = require('path')
-const vue       = require('rollup-plugin-vue')
-const buble     = require('rollup-plugin-buble')
-const commonjs  = require('rollup-plugin-commonjs')
-const resolve   = require('rollup-plugin-node-resolve')
-const camelcase = require('camelcase')
-
-console.log('=== building vue files ========================================')
-
-var felibName = ''
-if(process.argv.length >= 3) {
-    felibName = process.argv[2]
+const process = require('process');
+const fs = require('fs-extra');
+
+const rollup = require('rollup');
+const path = require('path');
+const vue = require('rollup-plugin-vue');
+const buble = require('rollup-plugin-buble');
+const commonjs = require('rollup-plugin-commonjs');
+const resolve = require('rollup-plugin-node-resolve');
+const camelcase = require('camelcase');
+
+console.log('=== building vue files ========================================');
+
+var felibName = '';
+if (process.argv.length >= 3) {
+    felibName = process.argv[2];
 } else {
-    console.log('please provide a name for the felib to use')
-    process.exit(-1)
+    console.log('please provide a name for the felib to use');
+    process.exit(-1);
 }
 
-console.log('building felib', felibName)
+console.log('building felib', felibName);
 
-var basePath = './src/main/content/jcr_root/apps'
-var distBasePath = './target/classes/etc/felibs/'+felibName
+var basePath = './src/main/content/jcr_root/apps';
+var distBasePath = './target/classes/etc/felibs/' + felibName;
 
 /** creatte the target directories
  *
  */
-fs.mkdirsSync(distBasePath)
-fs.mkdirsSync(distBasePath+'/css')
-fs.mkdirsSync(distBasePath+'/js')
+fs.mkdirsSync(distBasePath);
+fs.mkdirsSync(distBasePath + '/css');
+fs.mkdirsSync(distBasePath + '/js');
 
 /**
  * compile a single file
@@ -37,49 +37,49 @@ fs.mkdirsSync(distBasePath+'/js')
  * @param file
  * @returns {{name: string, nameCamelCase: *, nameCapitalCamelCase: string}}
  */
-function compileComponent(file){
-
-    console.log("compiling vue file: .%s", file)
-  // get component name from file name (file: a.vue, name: a)
-  var name = file.substring(1, file.lastIndexOf('/')).toLowerCase().split('/').join('-')
-  var nameCamelCase = camelcase(name)
-  var nameCapitalCamelCase = nameCamelCase.charAt(0).toUpperCase() + nameCamelCase.slice(1)
-
-  // each component needs a unique module name
-  var moduleName = 'cmp'+nameCapitalCamelCase
-
-  // compile the Vue component and give us a .js and .css
-  rollup.rollup({
-    input: `${basePath}${file}`,
-    plugins: [
-      resolve(),
-      commonjs({
-        namedExports: {
-          'vue-carousel': ['Carousel', 'Slide']
-        }
-      }),
-      vue({
-        compileTemplate: true,
-        css: `${distBasePath}/css/${nameCamelCase}.css`
-      }),
-      buble({exclude: 'node_modules/**'})
-    ]
-  }).then( function(bundle) {
-
-    bundle.write({
-      format: 'iife',
-      name: moduleName,
-      file: `${distBasePath}/js/${nameCamelCase}.js`,
-      globals: {
-        tools: 'tools',
-          log: 'log'
-      }
-
-    }).then( function() {
-        updateIndexFiles()
-    })
-  })
-  return { name: name, nameCamelCase: nameCamelCase, nameCapitalCamelCase: nameCapitalCamelCase}
+function compileComponent(file) {
+
+    console.log('compiling vue file: .%s', file);
+    // get component name from file name (file: a.vue, name: a)
+    var name = file.substring(1, file.lastIndexOf('/')).toLowerCase().split('/').join('-');
+    var nameCamelCase = camelcase(name);
+    var nameCapitalCamelCase = nameCamelCase.charAt(0).toUpperCase() + nameCamelCase.slice(1);
+
+    // each component needs a unique module name
+    var moduleName = 'cmp' + nameCapitalCamelCase;
+
+    // compile the Vue component and give us a .js and .css
+    rollup.rollup({
+        input: `${ basePath }${ file }`,
+        plugins: [
+            resolve(),
+            commonjs({
+                namedExports: {
+                    'vue-carousel': ['Carousel', 'Slide'],
+                },
+            }),
+            vue({
+                compileTemplate: true,
+                css: `${ distBasePath }/css/${ nameCamelCase }.css`,
+            }),
+            buble({ exclude: 'node_modules/**' }),
+        ],
+    }).then(function(bundle) {
+
+        bundle.write({
+            format: 'iife',
+            name: moduleName,
+            file: `${ distBasePath }/js/${ nameCamelCase }.js`,
+            globals: {
+                tools: 'tools',
+                log: 'log',
+            },
+
+        }).then(function() {
+            updateIndexFiles();
+        });
+    });
+    return { name: name, nameCamelCase: nameCamelCase, nameCapitalCamelCase: nameCapitalCamelCase };
 }
 
 /**
@@ -87,13 +87,13 @@ function compileComponent(file){
  *
  */
 function updateIndexFiles() {
-    var jsFiles = readDirs(distBasePath+'/', distBasePath + '/js', '.js')
-    jsFiles.unshift('<!-- auto generated by build -->')
-    fs.writeFileSync(distBasePath+'/js.txt', jsFiles.join('\n'))
+    var jsFiles = readDirs(distBasePath + '/', distBasePath + '/js', '.js');
+    jsFiles.unshift('<!-- auto generated by build -->');
+    fs.writeFileSync(distBasePath + '/js.txt', jsFiles.join('\n'));
 
-    var cssFiles = readDirs(distBasePath+'/', distBasePath + '/css', '.css')
-    cssFiles.unshift('<!-- auto generated by build -->')
-    fs.writeFileSync(distBasePath+'/css.txt', cssFiles.join('\n'))
+    var cssFiles = readDirs(distBasePath + '/', distBasePath + '/css', '.css');
+    cssFiles.unshift('<!-- auto generated by build -->');
+    fs.writeFileSync(distBasePath + '/css.txt', cssFiles.join('\n'));
 }
 
 /**
@@ -106,31 +106,31 @@ function updateIndexFiles() {
  * @returns {Array}
  */
 function readDirs(basePath, path, extFilter) {
-    var ret = new Array()
-    var files = fs.readdirSync(path)
-    files.forEach( function(file) {
+    var ret = new Array();
+    var files = fs.readdirSync(path);
+    files.forEach(function(file) {
         var filePath = path + '/' + file;
-        if(filePath.endsWith(extFilter)) {
-            ret.push(filePath.slice(basePath.length))
+        if (filePath.endsWith(extFilter)) {
+            ret.push(filePath.slice(basePath.length));
         }
-        var stats = fs.statSync(filePath)
-        if(stats.isDirectory()) {
-            ret = ret.concat(readDirs(basePath, filePath, extFilter))
+        var stats = fs.statSync(filePath);
+        if (stats.isDirectory()) {
+            ret = ret.concat(readDirs(basePath, filePath, extFilter));
         }
-    })
+    });
     return ret;
 }
 
 // find all the vue files in this project
-var vueFiles = readDirs(basePath, basePath, '.vue')
+var vueFiles = readDirs(basePath, basePath, '.vue');
 
 // for each of the files compile it
-vueFiles.forEach( function(file) {
+vueFiles.forEach(function(file) {
 
-    compileComponent(file)
+    compileComponent(file);
 
-})
+});
 
-if(process.argv[3]) {
-    console.log('upload')
+if (process.argv[3]) {
+    console.log('upload');
 }
diff --git a/ui.apps/src/main/content/buildscripts/cl-fragments.js b/ui.apps/src/main/content/buildscripts/cl-fragments.js
index aae299a3f..a5cc0b61e 100644
--- a/ui.apps/src/main/content/buildscripts/cl-fragments.js
+++ b/ui.apps/src/main/content/buildscripts/cl-fragments.js
@@ -1,23 +1,23 @@
-let marked = require('marked')
+let marked = require('marked');
 
 let idx = 0;
 
 function escape(text) {
-    return text.replace(/&/g,'&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 
 function card(title, text, link) {
     let shortened = text.split('#');
     let md = marked('###' + shortened[1]);
-    return `<card${idx}
+    return `<card${ idx }
         jcr:primaryType="nt:unstructured"
-        buttontext="See ${title}"
-        buttonlink="${link}"
+        buttontext="See ${ title }"
+        buttonlink="${ link }"
         buttoncolor="primary"
-        title="${title}"
-        text="${escape(md)}">
-        </card${idx++}>
-    `
+        title="${ title }"
+        text="${ escape(md) }">
+        </card${ idx++ }>
+    `;
 }
 
 module.exports = {
@@ -26,15 +26,15 @@ module.exports = {
         return `<?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
             jcr:primaryType="per:Page"
-            jcr:title="tf-cl | ${name}"
+            jcr:title="tf-cl | ${ name }"
             doNotCopy="{Boolean}true"
-            jcr:description="${name} themecleanflex component library"
+            jcr:description="${ name } themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
         sling:resourceType="themecleanflex/components/page"
-        jcr:title="${name}"
-        description="${name} themecleanflex component library"
+        jcr:title="${ name }"
+        description="${ name } themecleanflex component library"
         excludeFromSitemap="true"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
@@ -59,46 +59,46 @@ module.exports = {
         </c5></columns>
 <icons jcr:primaryType="nt:unstructured"></icons>
         </clfooter>        
-        </jcr:content></jcr:root>`
+        </jcr:content></jcr:root>`;
     },
 
     title(title) {
-return `<title${idx} jcr:primaryType="nt:unstructured" 
+        return `<title${ idx } jcr:primaryType="nt:unstructured" 
     sling:resourceType="themecleanflex/components/richtext" 
-    text="${escape('<h1>'+title+'</h1>')}">
-</title${idx++}>`
+    text="${ escape('<h1>' + title + '</h1>') }">
+</title${ idx++ }>`;
     },
 
     subtitle(title) {
-        return `<title${idx} jcr:primaryType="nt:unstructured" 
+        return `<title${ idx } jcr:primaryType="nt:unstructured" 
             sling:resourceType="themecleanflex/components/richtext" 
             toppadding="25"
             bottompadding="25"
             custombackground="true"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="${escape('<h2>'+title+'</h2>')}">
-        </title${idx++}>`
-            },
+            text="${ escape('<h2>' + title + '</h2>') }">
+        </title${ idx++ }>`;
+    },
 
     text(text) {
-        return `<text${idx} jcr:primaryType="nt:unstructured" 
+        return `<text${ idx } jcr:primaryType="nt:unstructured" 
             sling:resourceType="themecleanflex/components/richtext" 
-            text="${escape(text)}">
-        </text${idx++}>`
-            },
+            text="${ escape(text) }">
+        </text${ idx++ }>`;
+    },
 
     listChildren(path, children) {
         const text = `<ul>
-${children.map((child => `<li><a href="${path}${child}.html">${child}</a></li>`)).join('')}
+${ children.map((child => `<li><a href="${ path }${ child }.html">${ child }</a></li>`)).join('') }
 </ul>`;
         return this.text(text);
     },
 
     tag(name, attrs, children = []) {
-        return `<${name}${idx}
-        ${attrs.map( (attr) => attr[0]+'="'+escape(attr[1])+'"').join(' ')}>${children.join('\n')}
-        </${name}${idx++}>`
+        return `<${ name }${ idx }
+        ${ attrs.map((attr) => attr[0] + '="' + escape(attr[1]) + '"').join(' ') }>${ children.join('\n') }
+        </${ name }${ idx++ }>`;
     },
 
     home() {
@@ -115,7 +115,7 @@ ${children.map((child => `<li><a href="${path}${child}.html">${child}</a></li>`)
     },
 
     pager() {
-        return `<pager${idx}
+        return `<pager${ idx }
         colorscheme="light"
         toppadding="30"
         bottompadding="30"
@@ -126,13 +126,13 @@ ${children.map((child => `<li><a href="${path}${child}.html">${child}</a></li>`)
         prevlabel="&lt; previous"
         nextlabel="next &gt;"
         jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager${idx++}>`;
+        </pager${ idx++ }>`;
         // return this.text('<p><a href="/content/themecleanflex/pages/library.html">component library home</a></p>');
     },
 
     intro(md) {
         return `
-        <intro${idx} jcr:primaryType="nt:unstructured" 
+        <intro${ idx } jcr:primaryType="nt:unstructured" 
             sling:resourceType="themecleanflex/components/richtext" 
             bottompadding="25"
             toppadding="25"
@@ -140,18 +140,18 @@ ${children.map((child => `<li><a href="${path}${child}.html">${child}</a></li>`)
             custombackground="true"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="${escape(marked(md))}">
-        </intro${idx++}>
-        `
+            text="${ escape(marked(md)) }">
+        </intro${ idx++ }>
+        `;
     },
 
     container(el, content) {
-        return `<container${idx}
+        return `<container${ idx }
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
-            htmlelement="${el}">
-            ${content}
-        </container${idx++}>`
+            htmlelement="${ el }">
+            ${ content }
+        </container${ idx++ }>`;
     },
 
 
@@ -159,7 +159,7 @@ ${children.map((child => `<li><a href="${path}${child}.html">${child}</a></li>`)
         let cardNum = idx;
         idx++;
         return (
-        `<cards${cardNum}
+            `<cards${ cardNum }
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/cards"
             bgcolor="#ffffff" bottompadding="20"
@@ -172,10 +172,10 @@ ${children.map((child => `<li><a href="${path}${child}.html">${child}</a></li>`)
             customcardcolor="true"
             cardcolor="#eeeeee">
                 <cards jcr:primaryType="nt:unstructured">
-                    ${cards.reduce( (cards, {title,text,link}) => cards + card(title,text,link), "")}
+                    ${ cards.reduce((cards, { title, text, link }) => cards + card(title, text, link), '') }
                 </cards>
-        </cards${cardNum}>
-        `)
-    }
+        </cards${ cardNum }>
+        `);
+    },
 
-}
+};
diff --git a/ui.apps/src/main/content/buildscripts/cl.js b/ui.apps/src/main/content/buildscripts/cl.js
index 47fc16ebc..2216c6b30 100644
--- a/ui.apps/src/main/content/buildscripts/cl.js
+++ b/ui.apps/src/main/content/buildscripts/cl.js
@@ -4,39 +4,39 @@ const clfrags = require('./cl-fragments.js');
 
 const compvars = require('./variations.js');
 
-function outSample(name, sample, variation=null) {
-    const data = fs.readJSONSync('../fragments/'+name+'/'+sample);
+function outSample(name, sample, variation = null) {
+    const data = fs.readJSONSync('../fragments/' + name + '/' + sample);
 
-    let out = ""
-    if(variation) {
+    let out = '';
+    if (variation) {
         const variationName = variation.name;
         const withoutName = Object.assign({}, variation);
         delete withoutName.name;
         Object.assign(data.model, withoutName);
-        data.group=".hidden";
-        data.title += " Sample Variation - " + variationName;
+        data.group = '.hidden';
+        data.title += ' Sample Variation - ' + variationName;
     }
-    out += clfrags.subtitle(`${data.title} (${data.group})`);
-    const attrs = [['jcr:primaryType', 'nt:unstructured'], ['sling:resourceType','themecleanflex/components/'+name]];
+    out += clfrags.subtitle(`${ data.title } (${ data.group })`);
+    const attrs = [['jcr:primaryType', 'nt:unstructured'], ['sling:resourceType', 'themecleanflex/components/' + name]];
     const children = [];
 
-    for(let prop in data.model) {
-        if(typeof data.model[prop] === 'string') {
-            attrs.push( [prop, data.model[prop]] );
+    for (let prop in data.model) {
+        if (typeof data.model[prop] === 'string') {
+            attrs.push([prop, data.model[prop]]);
         } else {
-            const ret = ['<'+prop+' jcr:primaryType="nt:unstructured">'];
+            const ret = ['<' + prop + ' jcr:primaryType="nt:unstructured">'];
             const list = data.model[prop];
-            for(let i = 0; i < list.length; i++) {
+            for (let i = 0; i < list.length; i++) {
                 const child = list[i];
                 const attrs = [['jcr:primaryType', 'nt:unstructured']];
-                for(let prop in child) {
-                    if(typeof child[prop] === 'string') {
-                        attrs.push( [prop, child[prop]] );
+                for (let prop in child) {
+                    if (typeof child[prop] === 'string') {
+                        attrs.push([prop, child[prop]]);
                     }
                 }
-                ret.push(clfrags.tag('c',attrs));
+                ret.push(clfrags.tag('c', attrs));
             }
-            ret.push('</'+prop+'>');
+            ret.push('</' + prop + '>');
             children.push(ret.join(''));
         }
     }
@@ -46,21 +46,21 @@ function outSample(name, sample, variation=null) {
 
 
 function buildPage(target, name, samples, readme, variations) {
-    
-    const targetFolder = target+'/'+name;
+
+    const targetFolder = target + '/' + name;
     fs.mkdirsSync(targetFolder);
     const out = fs.createWriteStream(targetFolder + '/.content.xml');
     out.write(clfrags.header(name));
     out.write(clfrags.home());
     out.write(clfrags.pager());
 
-    let readmeContent = ""
-    if( readme ) {
+    let readmeContent = '';
+    if (readme) {
         let md = fs.readFileSync('../fragments/' + name + '/readme.md', 'utf-8');
         readmeContent = clfrags.intro(md);
     }
 
-    const samplesContent = samples.reduce( (val, sample) => val + outSample(name,sample), readmeContent )
+    const samplesContent = samples.reduce((val, sample) => val + outSample(name, sample), readmeContent);
     out.write(clfrags.container('main', samplesContent));
     out.write(clfrags.pager());
     out.write(clfrags.footer());
@@ -69,19 +69,19 @@ function buildPage(target, name, samples, readme, variations) {
 }
 
 function buildVariationPages(target, name, samples, variations) {
-    const targetRoot = target+'/'+name;
+    const targetRoot = target + '/' + name;
     samples.forEach((sample) => {
-        if(sample == 'sample-empty.json') {
+        if (sample == 'sample-empty.json') {
             return;
         }
-        const sampleName = sample.substring(0,sample.length - 5);
-        const targetFolder = targetRoot + '/' + sampleName
+        const sampleName = sample.substring(0, sample.length - 5);
+        const targetFolder = targetRoot + '/' + sampleName;
         fs.mkdirsSync(targetFolder);
         const out = fs.createWriteStream(targetFolder + '/.content.xml');
-        out.write(clfrags.header(name+sampleName));
+        out.write(clfrags.header(name + sampleName));
         out.write(clfrags.home());
         out.write(clfrags.pager());
-        const samplesContent = variations.reduce( (val, variation) => val + outSample(name,sample,variation));
+        const samplesContent = variations.reduce((val, variation) => val + outSample(name, sample, variation));
         out.write(clfrags.container('main', samplesContent));
         out.write(clfrags.pager());
         out.write(clfrags.footer());
@@ -90,25 +90,25 @@ function buildVariationPages(target, name, samples, variations) {
 }
 
 function buildIndexPage(target, pages) {
-    
+
     const targetFolder = target;
     fs.mkdirsSync(targetFolder);
     const out = fs.createWriteStream(targetFolder + '/.content.xml');
     out.write(clfrags.header('component library'));
     out.write(clfrags.pager());
 
-    let mainContent = ""
+    let mainContent = '';
     mainContent += clfrags.title('component library');
 
-    let cards = pages.map( page => ({
+    let cards = pages.map(page => ({
         title: page.name,
         text: fs.readFileSync('../fragments/' + page.name + '/readme.md', 'utf-8'),
-        link: `library/${page.name}.html`
-    }))
+        link: `library/${ page.name }.html`,
+    }));
 
     mainContent += clfrags.cards(cards);
 
-    out.write(clfrags.container('main',mainContent));
+    out.write(clfrags.container('main', mainContent));
     out.write(clfrags.pager());
     out.write(clfrags.footer());
     out.close();
@@ -118,22 +118,22 @@ function forEachComponent(target = 'src/main/content/jcr_root/content/themeclean
     const pages = [];
     const components = fs.readdirSync(root);
     const variations = compvars.getVariations();
-    components.forEach( (name) => {
-        const entry = fs.statSync(root+name);
-        if(entry.isDirectory()) {
+    components.forEach((name) => {
+        const entry = fs.statSync(root + name);
+        if (entry.isDirectory()) {
             const page = {};
             page.name = name;
-            const files = fs.readdirSync(root+name);
+            const files = fs.readdirSync(root + name);
             let hasEmptySample = false;
-            const samples = files.filter( (name) => { 
+            const samples = files.filter((name) => {
                 if (name == 'sample-empty.json') {
                     hasEmptySample = true;
                     return false;
                 }
                 return name.startsWith('sample') && name.endsWith('.json');
-            } );
+            });
             if (hasEmptySample) samples.push('sample-empty.json');
-            const readme = files.includes( 'readme.md' );
+            const readme = files.includes('readme.md');
             page.readme = readme;
             buildPage(target, name, samples, readme, variations);
             pages.push(page);
diff --git a/ui.apps/src/main/content/buildscripts/readme.md b/ui.apps/src/main/content/buildscripts/readme.md
index ddf2f01d2..fe9f13cc3 100644
--- a/ui.apps/src/main/content/buildscripts/readme.md
+++ b/ui.apps/src/main/content/buildscripts/readme.md
@@ -1,6 +1,5 @@
 # common build scripts used by peregrine
 
-
 builds the vue components of a project into an felib
 
 ```node buildvue.js <felib name>```
\ No newline at end of file
diff --git a/ui.apps/src/main/content/buildscripts/validatepage.js b/ui.apps/src/main/content/buildscripts/validatepage.js
index c3f63971b..92d7405b9 100644
--- a/ui.apps/src/main/content/buildscripts/validatepage.js
+++ b/ui.apps/src/main/content/buildscripts/validatepage.js
@@ -11,138 +11,140 @@ const queue = [];
 const visited = [];
 
 function diff(name) {
-  try {
-    const image2 = PNG.sync.read(fs.readFileSync(`${out_path}/${name}`));
-    if(!fs.existsSync(`approved/${name}`)) {
-      fs.writeFileSync(`approved/${name}`, PNG.sync.write(image2));
+    try {
+        const image2 = PNG.sync.read(fs.readFileSync(`${ out_path }/${ name }`));
+        if (!fs.existsSync(`approved/${ name }`)) {
+            fs.writeFileSync(`approved/${ name }`, PNG.sync.write(image2));
+        }
+        const image1 = PNG.sync.read(fs.readFileSync(`approved/${ name }`));
+        const width = Math.max(image1.width, image2.width);
+        const height = Math.max(image1.height, image2.height);
+
+        const diff = new PNG({ width, height });
+        // const img1 = new PNG({width, height}); img1.bitblt(image1, 0,0, image1.width, image1.height, 0,0);
+        // const img2 = new PNG({width, height}); img2.bitblt(image2, 0,0, image2.width, image2.height, 0,0);
+
+        pixelmatch(image1.data, image2.data, diff.data, width, height, { threshold: 0.1 });
+
+        fs.writeFileSync(`${ out_path }/diff/${ name }`, PNG.sync.write(diff));
+    } catch (error) {
+        console.error(error);
     }
-    const image1 = PNG.sync.read(fs.readFileSync(`approved/${name}`));
-    const width = Math.max(image1.width, image2.width);
-    const height = Math.max(image1.height, image2.height);
-
-    const diff = new PNG({width, height});
-    // const img1 = new PNG({width, height}); img1.bitblt(image1, 0,0, image1.width, image1.height, 0,0);
-    // const img2 = new PNG({width, height}); img2.bitblt(image2, 0,0, image2.width, image2.height, 0,0);
-    
-    pixelmatch(image1.data, image2.data, diff.data, width, height, {threshold: 0.1});
-    
-    fs.writeFileSync(`${out_path}/diff/${name}`, PNG.sync.write(diff));
-  } catch( error ) {
-    console.error(error);
-  }
 }
 
 function report(out, url, version, name) {
-  out.push({url, version, name})
+    out.push({ url, version, name });
 }
 
 function generateReport(out, name) {
-  console.log('writing report for', name);
-  const data = [];
-  data.push('<table width="100%">');
-  out.forEach( entry => {
-    data.push(`<tr><td colspan="3"><h2>${entry.version} ${entry.url}</h2></td></tr>`);
-    data.push(`<tr>`);
-    data.push(`<td style="width: 30%" valign="top"><img style="max-width: 100%" src="${entry.name}"></td>`);
-    data.push(`<td style="width: 30%" valign="top"><img style="max-width: 100%" src="../../approved/${entry.name}"></td>`);
-    data.push(`<td style="width: 30%" valign="top"><img style="max-width: 100%" src="diff/${entry.name}"></td>`);
-    data.push(`</tr>`);
-  })
-  data.push(`</table`);
-  fs.writeFileSync(`${out_path}/${name}.html`, data.join('\n'));
+    console.log('writing report for', name);
+    const data = [];
+    data.push('<table width="100%">');
+    out.forEach(entry => {
+        data.push(`<tr><td colspan="3"><h2>${ entry.version } ${ entry.url }</h2></td></tr>`);
+        data.push(`<tr>`);
+        data.push(`<td style="width: 30%" valign="top"><img style="max-width: 100%" src="${ entry.name }"></td>`);
+        data.push(`<td style="width: 30%" valign="top"><img style="max-width: 100%" src="../../approved/${ entry.name }"></td>`);
+        data.push(`<td style="width: 30%" valign="top"><img style="max-width: 100%" src="diff/${ entry.name }"></td>`);
+        data.push(`</tr>`);
+    });
+    data.push(`</table`);
+    fs.writeFileSync(`${ out_path }/${ name }.html`, data.join('\n'));
 }
 
 async function screenShotAt(out, url, page, width, version, name) {
-  console.log('screenshot:',url,width, version);
-  await page.setViewport( { width: width, height: 1024 } );
-  await page.screenshot({ path: `${out_path}/${name}-${version}.png`, fullPage: true});
-  diff(`${name}-${version}.png`);
-  report(out, url, version, `${name}-${version}.png`);
+    console.log('screenshot:', url, width, version);
+    await page.setViewport({ width: width, height: 1024 });
+    await page.screenshot({ path: `${ out_path }/${ name }-${ version }.png`, fullPage: true });
+    diff(`${ name }-${ version }.png`);
+    report(out, url, version, `${ name }-${ version }.png`);
 }
 
 async function makeRenditions(base, path) {
-  visited.push(path);
-  let out = [];
-  const name = path.substring(base.length+1).replace(/[\.\/]/g, '-');
-  if(name.split('-').length > 3) {
-    return;
-  }
-  const browser = await puppeteer.launch({ headless: true, defaultViewport: null });
-  const page = await browser.newPage();
-  try {
-    await page.goto(path, { waitUntil: 'networkidle0'});
-  } catch (err) {
-    console.log(err);
-  }
-  await screenShotAt(out, path, page, 320, 'mobile', name);
-  await screenShotAt(out, path, page, 768, 'tablet', name);
-  await screenShotAt(out, path, page, 1024, 'desktop', name);
-  await screenShotAt(out, path, page, 1600, 'desktop-wide', name);
-  
-  const hrefs = await page.$$eval('a', as => as.map(a => a.href));
-  hrefs.forEach( url => {
-    if(visited.indexOf(url) < 0 && queue.indexOf(url) < 0 && url.startsWith(base)) {
-      if(url !== base+'.html' && url.endsWith('.html')) {
-        queue.push(url);
-      }
-    }    
-  });
-  console.log(queue.length, 'items to go')
+    visited.push(path);
+    let out = [];
+    const name = path.substring(base.length + 1).replace(/[\.\/]/g, '-');
+    if (name.split('-').length > 3) {
+        return;
+    }
+    const browser = await puppeteer.launch({ headless: true, defaultViewport: null });
+    const page = await browser.newPage();
+    try {
+        await page.goto(path, { waitUntil: 'networkidle0' });
+    } catch (err) {
+        console.log(err);
+    }
+    await screenShotAt(out, path, page, 320, 'mobile', name);
+    await screenShotAt(out, path, page, 768, 'tablet', name);
+    await screenShotAt(out, path, page, 1024, 'desktop', name);
+    await screenShotAt(out, path, page, 1600, 'desktop-wide', name);
+
+    const hrefs = await page.$$eval('a', as => as.map(a => a.href));
+    hrefs.forEach(url => {
+        if (visited.indexOf(url) < 0 && queue.indexOf(url) < 0 && url.startsWith(base)) {
+            if (url !== base + '.html' && url.endsWith('.html')) {
+                queue.push(url);
+            }
+        }
+    });
+    console.log(queue.length, 'items to go');
 
-  await browser.close();
-  generateReport(out, name);
+    await browser.close();
+    generateReport(out, name);
 
 };
 
 function makeDirs(relpath) {
-  const segments = relpath.split('/');
-  for(let i = 0; i < segments.length; i++) {
-    const s = segments.slice(0, i+1).join('/');
-    if(!fs.existsSync(s)) {
-      fs.mkdirSync(s);
+    const segments = relpath.split('/');
+    for (let i = 0; i < segments.length; i++) {
+        const s = segments.slice(0, i + 1).join('/');
+        if (!fs.existsSync(s)) {
+            fs.mkdirSync(s);
+        }
     }
-  }
 }
 
 function makeIndexPage(pages) {
-  console.log('Creating master index page.');
-  const out = fs.createWriteStream(out_path + '/index.html');
-  out.write('<ul>');
-  pages.forEach((page => {
-    out.write('<li>');
-    out.write('<a href="' + page + '">' + page + '</a>');
-    out.write('</li>');
-  }));
-  out.write('<ul>');
-  out.close();
+    console.log('Creating master index page.');
+    const out = fs.createWriteStream(out_path + '/index.html');
+    out.write('<ul>');
+    pages.forEach((page => {
+        out.write('<li>');
+        out.write('<a href="' + page + '">' + page + '</a>');
+        out.write('</li>');
+    }));
+    out.write('<ul>');
+    out.close();
 }
 
 (async () => {
-  makeDirs('target/out/diff');
-  makeDirs('approved');
-  console.log('vaildatepage <parentUrl> <relativePath> [single]');
-  if(process.argv.length >= 3) {
-    const url = process.argv[2] + process.argv[3]
-    const single = process.argv[4]
-    const parent = process.argv[2];
-      queue.push(url);
-    let ps = [];
-    while(queue.length > 0) {
-      while(ps.length < 8 && queue.length > 0) {
-        const href = queue.pop();
-        console.log('processing', href);
-        
-        ps.push(new Promise(async (res, rej) => {
-          await makeRenditions(parent, href);
-          res();
-        }))
-      }
-      await Promise.all(ps);
-      ps = [];
-      if(single) { break; }
+    makeDirs('target/out/diff');
+    makeDirs('approved');
+    console.log('vaildatepage <parentUrl> <relativePath> [single]');
+    if (process.argv.length >= 3) {
+        const url = process.argv[2] + process.argv[3];
+        const single = process.argv[4];
+        const parent = process.argv[2];
+        queue.push(url);
+        let ps = [];
+        while (queue.length > 0) {
+            while (ps.length < 8 && queue.length > 0) {
+                const href = queue.pop();
+                console.log('processing', href);
+
+                ps.push(new Promise(async (res, rej) => {
+                    await makeRenditions(parent, href);
+                    res();
+                }));
+            }
+            await Promise.all(ps);
+            ps = [];
+            if (single) {
+                break;
+            }
+        }
+        const files = fs.readdirSync(out_path);
+        const pages = files.filter(file => file.endsWith('.html'));
+        makeIndexPage(pages);
     }
-    const files = fs.readdirSync(out_path);
-    const pages = files.filter(file => file.endsWith('.html'));
-    makeIndexPage(pages);
-  }
 })();
diff --git a/ui.apps/src/main/content/buildscripts/variations.js b/ui.apps/src/main/content/buildscripts/variations.js
index 6b0cc1c18..31674981c 100644
--- a/ui.apps/src/main/content/buildscripts/variations.js
+++ b/ui.apps/src/main/content/buildscripts/variations.js
@@ -7,8 +7,8 @@ function objectify(array) {
     const obj = array.map(optionObjectsArr => {
         let combinedName = optionObjectsArr.reduce((combinedName, optionObject) => {
             return combinedName ? (combinedName + '; ' + optionObject.name) : optionObject.name;
-        }, "");
-        return Object.assign({}, ...optionObjectsArr, {name: combinedName});
+        }, '');
+        return Object.assign({}, ...optionObjectsArr, { name: combinedName });
     });
     return obj;
 }
@@ -17,18 +17,18 @@ function createVariationMap(root = '../variation-fragments/') {
     const variations = [];
     const folders = fs.readdirSync(root);
     folders.forEach((name) => {
-        const entry = fs.statSync(root+name);
-        if(entry.isDirectory()) {
+        const entry = fs.statSync(root + name);
+        if (entry.isDirectory()) {
             const variation = [];
-            const options = fs.readdirSync(root+name);
+            const options = fs.readdirSync(root + name);
             options.forEach((optionName) => {
-               if(optionName.endsWith('.json')) {
-                   const optionJson = fs.readJSONSync(root+name+'/'+optionName);
-                   let optionLabel = optionName.substring(0,optionName.length - 5);
-                   optionLabel = optionLabel.replace("-", ": ");
-                   optionJson.name = optionLabel;
-                   variation.push(optionJson);
-               }
+                if (optionName.endsWith('.json')) {
+                    const optionJson = fs.readJSONSync(root + name + '/' + optionName);
+                    let optionLabel = optionName.substring(0, optionName.length - 5);
+                    optionLabel = optionLabel.replace('-', ': ');
+                    optionJson.name = optionLabel;
+                    variation.push(optionJson);
+                }
             });
             variations.push(variation);
         }
@@ -42,7 +42,7 @@ module.exports = {
         let cartified = cartesian(...variations);
         let objectified = objectify(cartified);
         return objectified;
-    }
-}
+    },
+};
 
 //delete object.name;
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/.content.xml
index 4e3b26877..fdf44984c 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="sling:Folder"
-  jcr:title="themecleanflex Root"
-  jcr:description="themecleanflex Apps Root folder"/>
\ No newline at end of file
+          jcr:primaryType="sling:Folder"
+          jcr:title="themecleanflex Root"
+          jcr:description="themecleanflex Apps Root folder"/>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/.content.xml
index 65efcebec..756c4e086 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/.content.xml
@@ -1,70 +1,133 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Accordion - Light">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Accordion - Light" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false">
-        <accordiontoggle jcr:primaryType="nt:unstructured">
-          <accordiontoggle0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Why accordion?"/>
-          <accordiontoggle1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="How to accordion?"/>
-          <accordiontoggle2 jcr:primaryType="nt:unstructured" text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>" title="Join accordion"/>
-        </accordiontoggle>
-      </jcr:content>
-    </sample>
-    <sample-accordiondark jcr:primaryType="nt:unstructured" title="Accordion - Dark" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion">
-        <accordiontoggle jcr:primaryType="nt:unstructured">
-          <accordiontoggle0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Learn More"/>
-          <accordiontoggle1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="Contact Us"/>
-        </accordiontoggle>
-      </jcr:content>
-    </sample-accordiondark>
-    <sample-accordionmedia jcr:primaryType="nt:unstructured" title="Accordion - With Media" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion">
-        <accordiontoggle jcr:primaryType="nt:unstructured">
-          <accordiontoggle0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Learn More"/>
-          <accordiontoggle1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="Contact Us"/>
-        </accordiontoggle>
-      </jcr:content>
-    </sample-accordionmedia>
-    <sample-bg jcr:primaryType="nt:unstructured" title="Accordion - Background Image" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false">
-        <accordiontoggle jcr:primaryType="nt:unstructured">
-          <accordiontoggle0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Why accordion?"/>
-          <accordiontoggle1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="How to accordion?"/>
-          <accordiontoggle2 jcr:primaryType="nt:unstructured" text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>" title="Join accordion"/>
-        </accordiontoggle>
-      </jcr:content>
-    </sample-bg>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Accordion" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured">
-        <tabs jcr:primaryType="nt:unstructured"/>
-      </jcr:content>
-    </sample-blank>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Accordion With Full RTE" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false">
-        <accordiontoggle jcr:primaryType="nt:unstructured">
-          <accordiontoggle0 jcr:primaryType="nt:unstructured" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" title="Big RTE Test Chunk"/>
-          <accordiontoggle1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="How to accordion?"/>
-          <accordiontoggle2 jcr:primaryType="nt:unstructured" text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>" title="Join accordion"/>
-        </accordiontoggle>
-      </jcr:content>
-    </sample-rte>
-    <sample-toggle jcr:primaryType="nt:unstructured" title="Toggle" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article">
-        <accordiontoggle jcr:primaryType="nt:unstructured">
-          <accordiontoggle0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Why accordion?"/>
-          <accordiontoggle1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="How to accordion?"/>
-          <accordiontoggle2 jcr:primaryType="nt:unstructured" text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>" title="Join accordion"/>
-        </accordiontoggle>
-      </jcr:content>
-    </sample-toggle>
-    <sample-togglemedia jcr:primaryType="nt:unstructured" title="Toggle  - With Media" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle">
-        <accordiontoggle jcr:primaryType="nt:unstructured">
-          <accordiontoggle0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Learn More"/>
-          <accordiontoggle1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="Contact Us"/>
-        </accordiontoggle>
-      </jcr:content>
-    </sample-togglemedia>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Accordion - Light">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Accordion - Light" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion"
+                         backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30"
+                         showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <accordiontoggle0 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                                      title="Why accordion?"/>
+                    <accordiontoggle1 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                                      title="How to accordion?"/>
+                    <accordiontoggle2 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>"
+                                      title="Join accordion"/>
+                </accordiontoggle>
+            </jcr:content>
+        </sample>
+        <sample-accordiondark jcr:primaryType="nt:unstructured" title="Accordion - Dark" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion Dark Theme"
+                         backgroundtype="color" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="false"
+                         bottompadding="30" toppadding="30" mediatype="image"
+                         imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                         mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article"
+                         toggletype="accordion">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <accordiontoggle0 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                                      title="Learn More"/>
+                    <accordiontoggle1 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                                      title="Contact Us"/>
+                </accordiontoggle>
+            </jcr:content>
+        </sample-accordiondark>
+        <sample-accordionmedia jcr:primaryType="nt:unstructured" title="Accordion - With Media" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion"
+                         backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30"
+                         toppadding="30" mediatype="image"
+                         imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                         mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                         toggletype="accordion">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <accordiontoggle0 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                                      title="Learn More"/>
+                    <accordiontoggle1 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                                      title="Contact Us"/>
+                </accordiontoggle>
+            </jcr:content>
+        </sample-accordionmedia>
+        <sample-bg jcr:primaryType="nt:unstructured" title="Accordion - Background Image" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion"
+                         custombackground="true" bgsize="cover" backgroundtype="image"
+                         bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                         colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25"
+                         bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article"
+                         accordionortoggle="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <accordiontoggle0 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                                      title="Why accordion?"/>
+                    <accordiontoggle1 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                                      title="How to accordion?"/>
+                    <accordiontoggle2 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>"
+                                      title="Join accordion"/>
+                </accordiontoggle>
+            </jcr:content>
+        </sample-bg>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Accordion" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured">
+                <tabs jcr:primaryType="nt:unstructured"/>
+            </jcr:content>
+        </sample-blank>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Accordion With Full RTE" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Accordion With Full RTE"
+                         backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30"
+                         showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <accordiontoggle0 jcr:primaryType="nt:unstructured"
+                                      text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                                      title="Big RTE Test Chunk"/>
+                    <accordiontoggle1 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                                      title="How to accordion?"/>
+                    <accordiontoggle2 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>"
+                                      title="Join accordion"/>
+                </accordiontoggle>
+            </jcr:content>
+        </sample-rte>
+        <sample-toggle jcr:primaryType="nt:unstructured" title="Toggle" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Toggle"
+                         backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30"
+                         toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <accordiontoggle0 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                                      title="Why accordion?"/>
+                    <accordiontoggle1 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                                      title="How to accordion?"/>
+                    <accordiontoggle2 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p>"
+                                      title="Join accordion"/>
+                </accordiontoggle>
+            </jcr:content>
+        </sample-toggle>
+        <sample-togglemedia jcr:primaryType="nt:unstructured" title="Toggle  - With Media" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" title="Peregrine Toggle"
+                         backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30"
+                         toppadding="30" mediatype="image" mediaposition="after"
+                         imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                         mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                         toggletype="toggle">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <accordiontoggle0 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                                      title="Learn More"/>
+                    <accordiontoggle1 jcr:primaryType="nt:unstructured"
+                                      text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                                      title="Contact Us"/>
+                </accordiontoggle>
+            </jcr:content>
+        </sample-togglemedia>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/template.vue
index 49a107185..83ea37782 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/accordion/template.vue
@@ -1,27 +1,27 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full" v-else>
-      <h2 class="text-xl text-center pb-4" v-if="model.showtitle == 'true'"
-      data-per-inline="model.title">{{model.title}}</h2>
-      <div class="flex -mx-3 flex-grow" v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full" v-else>
+            <h2 class="text-xl text-center pb-4" v-if="model.showtitle == 'true'"
+                data-per-inline="model.title">{{ model.title }}</h2>
+            <div class="flex -mx-3 flex-grow" v-bind:class="{
             'flex-col': model.mediaposition === 'before',
             'flex-col-reverse': model.mediaposition === 'after',
             'lg:flex-row': model.mediaposition === 'before',
             'lg:flex-row-reverse': model.mediaposition === 'after'
         }">
-        <div class="img-wrapper px-0 md:px-3" v-if="model.showmedia === 'true'"
-        v-bind:style="{flex:`0 0 ${model.mediawidth}%`}" v-bind:class="{
+                <div class="img-wrapper px-0 md:px-3" v-if="model.showmedia === 'true'"
+                     v-bind:style="{flex:`0 0 ${model.mediawidth}%`}" v-bind:class="{
             'img-wrapper rounded-none': model.roundedcorners == 'none',
             'img-wrapper rounded-sm': model.roundedcorners == 'small',
             'img-wrapper rounded': model.roundedcorners == 'medium',
             'img-wrapper rounded-lg': model.roundedcorners == 'large',
             'img-wrapper rounded-full': model.roundedcorners == 'full'
         }">
-          <themecleanflex-components-media :model="model"></themecleanflex-components-media>
-        </div>
-        <div class="accordion-container px-0 sm:mx-3 flex-grow overflow-hidden"
-        v-bind:class="{
+                    <themecleanflex-components-media :model="model"></themecleanflex-components-media>
+                </div>
+                <div class="accordion-container px-0 sm:mx-3 flex-grow overflow-hidden"
+                     v-bind:class="{
             'bg-white' : model.colorscheme === 'light',
             'bg-gray-800' : model.colorscheme === 'dark',
             'border border-solid border-gray-300': model.colorscheme === 'light' &amp;&amp; model.cardborder === 'true',
@@ -32,77 +32,84 @@
             'rounded-lg': model.roundedcorners == 'large',
             'rounded-full': model.roundedcorners == 'full'
         }">
-          <div class="accordion-item border-b transition-colors duration-200 ease-in-out"
-          v-for="(item, i) in model.accordiontoggle" :key="item.path || i" v-bind:id="`accordion${_uid}${parseInt(i)+1}`"
-          v-bind:class="{
+                    <div class="accordion-item border-b transition-colors duration-200 ease-in-out"
+                         v-for="(item, i) in model.accordiontoggle" :key="item.path || i"
+                         v-bind:id="`accordion${_uid}${parseInt(i)+1}`"
+                         v-bind:class="{
             'border-b border-solid border-gray-300': model.colorscheme === 'light' &amp;&amp; model.cardborder === 'true',
             'border-b border-solid border-gray-900': model.colorscheme === 'dark' &amp;&amp; model.cardborder === 'true',
             'bg-secondary': active[i]
         }">
-            <h3 class="accordion-item-header">
-              <button type="button" class="accordion-toggle-button font-bold m-0 flex justify-between items-center p-3 cursor-pointer w-full"
-              v-on:click="toggleItem(i)" v-bind:aria-expanded="active[i] ? 'true' : 'false'">
-                <span v-bind:data-per-inline="`model.accordiontoggle.${i}.title`">{{item.title}}</span>
-                <svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
-                class="transition-transform duration-150 ease-in-out" v-bind:style="`transform:${active[i] ? 'rotate(180deg)': 'rotate(0)'};`">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
-                  />
-                </svg>
-              </button>
-            </h3>
-            <div class="card-content overflow-hidden transition-height" role="tabpanel"
-            v-bind:style="`height:${active[i] ? heights[i] + 'px' : '0px'};`">
-              <div class="p-3" v-html="item.text" v-bind:data-per-inline="`model.accordiontoggle.${i}.text`"
-              v-bind:ref="`cardContent${i}`"></div>
+                        <h3 class="accordion-item-header">
+                            <button type="button"
+                                    class="accordion-toggle-button font-bold m-0 flex justify-between items-center p-3 cursor-pointer w-full"
+                                    v-on:click="toggleItem(i)" v-bind:aria-expanded="active[i] ? 'true' : 'false'">
+                                <span v-bind:data-per-inline="`model.accordiontoggle.${i}.title`">{{
+                                        item.title
+                                                                                                  }}</span>
+                                <svg width="16" height="16" viewBox="0 0 16 16" focusable="false"
+                                     class="transition-transform duration-150 ease-in-out"
+                                     v-bind:style="`transform:${active[i] ? 'rotate(180deg)': 'rotate(0)'};`">
+                                    <path fill-rule="evenodd" clip-rule="evenodd"
+                                          d="M13.293 4.29291L14.7072 5.70712L8.00008 12.4142L1.29297 5.70712L2.70718 4.29291L8.00008 9.5858L13.293 4.29291Z"
+                                    />
+                                </svg>
+                            </button>
+                        </h3>
+                        <div class="card-content overflow-hidden transition-height" role="tabpanel"
+                             v-bind:style="`height:${active[i] ? heights[i] + 'px' : '0px'};`">
+                            <div class="p-3" v-html="item.text"
+                                 v-bind:data-per-inline="`model.accordiontoggle.${i}.text`"
+                                 v-bind:ref="`cardContent${i}`"></div>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </themecleanflex-components-block>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        data: function() {
-          const numElements = this.model.accordiontoggle ? this.model.accordiontoggle.length : 0;
-          return {
+export default {
+    props: ['model'],
+    data: function() {
+        const numElements = this.model.accordiontoggle ? this.model.accordiontoggle.length : 0;
+        return {
             active: new Array(numElements).fill(false),
             heights: new Array(numElements).fill(0),
-          }
-        },
-        created() {
-          addEventListener("resize", this.setHeights);
-        },
-        destroyed() {
-          removeEventListener("resize", this.setHeights);
-        },
-        mounted: function() {
-          this.setHeights();
+        };
+    },
+    created() {
+        addEventListener('resize', this.setHeights);
+    },
+    destroyed() {
+        removeEventListener('resize', this.setHeights);
+    },
+    mounted: function() {
+        this.setHeights();
+    },
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.showtitle === 'true' && this.model.title, this.model.showmedia === 'true', this.model.accordiontoggle);
         },
-        computed: {
-        	isEditAndEmpty() {
-            if(!$peregrineApp.isAuthorMode()) return false
-            return this.$helper.areAllEmpty( this.model.showtitle === 'true' && this.model.title, this.model.showmedia === 'true', this.model.accordiontoggle );
-          }
-        },
-        methods: {
-          setHeights: function() {
-            this.heights.forEach( (item,i) => {
-              Vue.set(this.heights, i, this.$refs[`cardContent${i}`][0].clientHeight )}
+    },
+    methods: {
+        setHeights: function() {
+            this.heights.forEach((item, i) => {
+                    Vue.set(this.heights, i, this.$refs[`cardContent${ i }`][0].clientHeight);
+                },
             );
-          },
-          toggleItem(i) {
+        },
+        toggleItem(i) {
             if (this.model.toggletype === 'accordion') {
-              this.active.forEach( (active,j) => {
-                Vue.set(this.active, j, j === i ? !this.active[j] : false);
-              })
+                this.active.forEach((active, j) => {
+                    Vue.set(this.active, j, j === i ? !this.active[j] : false);
+                });
+            } else {
+                Vue.set(this.active, i, !this.active[i]);
             }
-            else {
-              Vue.set(this.active, i, !this.active[i])
-            }
-          }
-        }
-    }
+        },
+    },
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/.content.xml
index 3fe6a90df..1ce7f389e 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
           jcr:primaryType="per:Component"
           jcr:title="Block"
           group=".hidden"/>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/template.vue
index 7852342ff..d1e026399 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/block/template.vue
@@ -1,94 +1,94 @@
 <template>
-  <component class="w-full px-5 flex flex-col justify-center" ref="section"
-  v-bind:class="[classes, colors, model.component, model.extraclasses]" v-bind:style="[styles, sticky]"
-  v-bind:data-per-path="model.path" v-bind:is="model.htmlelement || &quot;div&quot;"
-  v-bind:id="model.anchorname">
-    <div class="embed-responsive embed-responsive-16by9 w-full h-full top-0 left-0"
-    v-if="model.custombackground === 'true' &amp;&amp; model.backgroundtype == 'video' &amp;&amp; model.bgvideo"
-    v-bind:style="`position:${'absolute'};pointer-events:${'none'};z-index:${'-1'};`">
-      <iframe class="w-full h-full" v-bind:src="videoSource"></iframe>
-    </div>
-    <div class="flex min-h-1" v-bind:class="{
+    <component class="w-full px-5 flex flex-col justify-center" ref="section"
+               v-bind:class="[classes, colors, model.component, model.extraclasses]" v-bind:style="[styles, sticky]"
+               v-bind:data-per-path="model.path" v-bind:is="model.htmlelement || &quot;div&quot;"
+               v-bind:id="model.anchorname">
+        <div class="embed-responsive embed-responsive-16by9 w-full h-full top-0 left-0"
+             v-if="model.custombackground === 'true' &amp;&amp; model.backgroundtype == 'video' &amp;&amp; model.bgvideo"
+             v-bind:style="`position:${'absolute'};pointer-events:${'none'};z-index:${'-1'};`">
+            <iframe class="w-full h-full" v-bind:src="videoSource"></iframe>
+        </div>
+        <div class="flex min-h-1" v-bind:class="{
             'container mx-auto' : model.blockwidth === 'default',
             'w-full max-w-3xl mx-auto' : model.blockwidth === 'article'
         }">
-      <slot></slot>
-    </div>
-  </component>
+            <slot></slot>
+        </div>
+    </component>
 </template>
 
 <script>
-    export default {
-        props: {
-          model: {
-            type: Object
-          }
+export default {
+    props: {
+        model: {
+            type: Object,
         },
-        data: function() {
-          return {
-            loadVideo: null
-          }
-        },
-        mounted() {
-          this.$nextTick(function () {
+    },
+    data: function() {
+        return {
+            loadVideo: null,
+        };
+    },
+    mounted() {
+        this.$nextTick(function() {
             this.loadVideo = true;
-          })
+        });
 
-          // Add top margin to perApp to account for fixed header when sticky is true
-          if( this.model.sticky === 'true' && !$peregrineApp.isAuthorMode()) {
-            if( this.$refs.section.style.position === 'fixed' ){
-              const height = this.$refs.section.clientHeight
-              this.$refs.section.parentElement.style.marginTop = height + 'px';
+        // Add top margin to perApp to account for fixed header when sticky is true
+        if (this.model.sticky === 'true' && !$peregrineApp.isAuthorMode()) {
+            if (this.$refs.section.style.position === 'fixed') {
+                const height = this.$refs.section.clientHeight;
+                this.$refs.section.parentElement.style.marginTop = height + 'px';
             }
-          }
-          //Offset height of anchor by height of the navbar and top padding
-          // let navSection = document.querySelector('nav').parentElement.parentElement.parentElement
-          // let navPosition = navSection.style.position
-          // let navSticky = navPosition === "sticky" || navPosition === "fixed" 
-          // let navOffset = navSticky ? navSection.clientHeight : 0
+        }
+        //Offset height of anchor by height of the navbar and top padding
+        // let navSection = document.querySelector('nav').parentElement.parentElement.parentElement
+        // let navPosition = navSection.style.position
+        // let navSticky = navPosition === "sticky" || navPosition === "fixed"
+        // let navOffset = navSticky ? navSection.clientHeight : 0
 
-          // this.$refs.anchor.style.top = `0px`
-          // this.$refs.anchor.style.marginTop = `-${navOffset}px`
-          // this.$refs.anchor.style.paddingTop = `${navOffset}px`
+        // this.$refs.anchor.style.top = `0px`
+        // this.$refs.anchor.style.marginTop = `-${navOffset}px`
+        // this.$refs.anchor.style.paddingTop = `${navOffset}px`
 
+    },
+    computed: {
+        videoSource() {
+            return this.loadVideo ? this.model.bgvideo + '?autoplay=1&amp;loop=1&amp;controls=0&amp;mute=1' : '';
+        },
+        classes: function() {
+            let classObject = {};
+            classObject['min-h-screen'] = this.model.fullheight == 'true';
+            classObject[`elevation-${ this.model.elevation }`] = this.model.elevation > 0;
+            return classObject;
         },
-        computed: {          
-          videoSource() {
-            return this.loadVideo ? this.model.bgvideo + '?autoplay=1&amp;loop=1&amp;controls=0&amp;mute=1' : "";
-          },
-          classes: function() {
-            let classObject = {}
-            classObject['min-h-screen'] = this.model.fullheight == 'true'
-            classObject[`elevation-${this.model.elevation}`] = this.model.elevation > 0
-            return classObject      
-          },
-          colors: function() {
+        colors: function() {
             let classes = {};
-            if( this.model.colorscheme === '' ) return classes;
+            if (this.model.colorscheme === '') return classes;
             classes['theme-light'] = this.model.colorscheme === 'light';
             classes['theme-dark'] = this.model.colorscheme === 'dark';
             return classes;
-          },
-          sticky: function() {
-            const sticky = this.model.sticky === 'true'
+        },
+        sticky: function() {
+            const sticky = this.model.sticky === 'true';
             return sticky && !$peregrineApp.isAuthorMode() ?
-            {
-              position: 'sticky',
-              top: '0',
-              width: '100%',
-              zIndex: '1000'
-            } : {}
-          },
-          styles: function() {
-            let styles = {}
+                {
+                    position: 'sticky',
+                    top: '0',
+                    width: '100%',
+                    zIndex: '1000',
+                } : {};
+        },
+        styles: function() {
+            let styles = {};
 
-            if(this.model.toppadding) styles.paddingTop = `${this.model.toppadding}px`;
-            if(this.model.bottompadding) styles.paddingBottom = `${this.model.bottompadding}px`;
+            if (this.model.toppadding) styles.paddingTop = `${ this.model.toppadding }px`;
+            if (this.model.bottompadding) styles.paddingBottom = `${ this.model.bottompadding }px`;
             styles.position = 'relative';
             styles.overflow = 'hidden';
 
-            if( this.model.custombackground === 'true') {
-              styles.background = this.backgroundStyles();
+            if (this.model.custombackground === 'true') {
+                styles.background = this.backgroundStyles();
             }
 
             styles.backgroundPositionX = this.model.bgxposition + '%';
@@ -97,43 +97,43 @@
             styles.backgroundRepeat = 'no-repeat';
 
             return styles;
-          }
         },
-        methods: {
-          backgroundStyles() {
-              if( this.model.custombackground === 'false') return ''
-              switch (this.model.backgroundtype) {
+    },
+    methods: {
+        backgroundStyles() {
+            if (this.model.custombackground === 'false') return '';
+            switch (this.model.backgroundtype) {
 
                 case 'image':
-                  const overlay = this.model.overlay === 'true' ? `${this.overlayStyle()},` : '' 
-                  if(this.model.bgimage) {
-                    return overlay + `url("${this.model.bgimage}")`
-                  } 
-                  return overlay
+                    const overlay = this.model.overlay === 'true' ? `${ this.overlayStyle() },` : '';
+                    if (this.model.bgimage) {
+                        return overlay + `url("${ this.model.bgimage }")`;
+                    }
+                    return overlay;
 
                 case 'gradient':
-                  return `linear-gradient(to right,${this.model.bgcolor},${this.model.color2})`
+                    return `linear-gradient(to right,${ this.model.bgcolor },${ this.model.color2 })`;
 
                 case 'color':
-                  return `${this.model.bgcolor}`
-                
+                    return `${ this.model.bgcolor }`;
+
                 default:
-                  return '' 
+                    return '';
 
             }
-          },
-          colorOpacity() {
+        },
+        colorOpacity() {
             const hex = this.model.overlaycolor;
-            return `rgba(${parseInt(hex.slice(1,3),16)}, 
-                         ${parseInt(hex.slice(3,5),16)}, 
-                         ${parseInt(hex.slice(5,7),16)}, 
-                         ${this.model.overlayopacity / 100} )`
-          },
-          overlayStyle() {
-            return `linear-gradient(to right, ${this.colorOpacity()}, ${this.colorOpacity()})`
-          }
-        }
+            return `rgba(${ parseInt(hex.slice(1, 3), 16) },
+                         ${ parseInt(hex.slice(3, 5), 16) },
+                         ${ parseInt(hex.slice(5, 7), 16) },
+                         ${ this.model.overlayopacity / 100 } )`;
+        },
+        overlayStyle() {
+            return `linear-gradient(to right, ${ this.colorOpacity() }, ${ this.colorOpacity() })`;
+        },
+    },
 
-    }
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/.content.xml
index 5cbbf0831..a465ae445 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/.content.xml
@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Breadcrumb" group="Chrome">
-  <jcr:content jcr:primaryType="nt:unstructured" level="3" toppadding="10" bottompadding="10" linkcolor="primary"/>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Breadcrumb"
+          group="Chrome">
+    <jcr:content jcr:primaryType="nt:unstructured" level="3" toppadding="10" bottompadding="10" linkcolor="primary"/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/template.vue
index e1f5d1e1d..71969ebab 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/breadcrumb/template.vue
@@ -1,39 +1,40 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="flex flex-wrap" v-else>
-      <span v-for="(item, i) in model.links" :key="item.path || i" v-bind:class="{'font-bold': i === model.links.length - 1}">
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="flex flex-wrap" v-else>
+      <span v-for="(item, i) in model.links" :key="item.path || i"
+            v-bind:class="{'font-bold': i === model.links.length - 1}">
         <a class="pipe-after no-underline mr-2" v-if="i + 1 &lt; model.links.length"
-        v-bind:href="item.link + '.html'" v-bind:class="{
+           v-bind:href="item.link + '.html'" v-bind:class="{
             'text-blue-700': model.linkcolor === 'primary',
             'text-green-700': model.linkcolor === 'success',
             'text-red-700': model.linkcolor === 'danger',
             'text-orange-700': model.linkcolor === 'warning',
             'text-white': model.linkcolor === 'light',
             'text-black': model.linkcolor === 'dark'
-        }">{{item.text}}</a>
-        <span class="mr-2" v-if="i+1 === model.links.length">{{item.text}}</span>
+        }">{{ item.text }}</a>
+        <span class="mr-2" v-if="i+1 === model.links.length">{{ item.text }}</span>
       </span>
-    </div>
-  </themecleanflex-components-block>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-          isEditAndEmpty() {
-              if(!$peregrineApp.isAuthorMode()) return false
-              //return (this.model.cards.length === 0)
-              return this.$helper.areAllEmpty(this.model.links)
-          }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            //return (this.model.cards.length === 0)
+            return this.$helper.areAllEmpty(this.model.links);
         },
-        methods: {
-           beforeSave(data) {
-               delete data.links
-               return data
-           }
-        }
-    }
+    },
+    methods: {
+        beforeSave(data) {
+            delete data.links;
+            return data;
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/.content.xml
index 28fbe5f67..8b85ab78e 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/.content.xml
@@ -1,39 +1,101 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Cards - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Cards - Example" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff">
-        <cards jcr:primaryType="nt:unstructured">
-          <cards0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One"/>
-          <cards1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two"/>
-          <cards2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three"/>
-          <cards3 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four"/>
-        </cards>
-      </jcr:content>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Cards" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showtext="true" showbutton="true" showcard="true">
-        <cards jcr:primaryType="nt:unstructured"/>
-      </jcr:content>
-    </sample-blank>
-    <sample-cardsnobackground jcr:primaryType="nt:unstructured" title="Cards - No Background" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff">
-        <cards jcr:primaryType="nt:unstructured">
-          <cards0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One"/>
-          <cards1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two"/>
-          <cards2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three"/>
-          <cards3 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four"/>
-        </cards>
-      </jcr:content>
-    </sample-cardsnobackground>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Cards With Full RTE" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee">
-        <cards jcr:primaryType="nt:unstructured">
-          <cards0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" title="Card One"/>
-          <cards1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two"/>
-          <cards2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three"/>
-        </cards>
-      </jcr:content>
-    </sample-rte>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Cards - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Cards - Example" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" bottompadding="20" showbutton="true"
+                         showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false"
+                         roundedcorners="large" cardcolor="#ffffff">
+                <cards jcr:primaryType="nt:unstructured">
+                    <cards0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center"
+                            image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                            imagealttext="Organized rope hanging on a winch"
+                            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                            title="Card One"/>
+                    <cards1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center"
+                            image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                            imagealttext="Several sets of rope"
+                            text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                            title="Card Two"/>
+                    <cards2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center"
+                            image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                            imagealttext="Messy pile of rope"
+                            text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                            title="Card Three"/>
+                    <cards3 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center"
+                            image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                            imagealttext="Tying a sailor knot"
+                            text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                            title="Card Four"/>
+                </cards>
+            </jcr:content>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Cards" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showtext="true" showbutton="true"
+                         showcard="true">
+                <cards jcr:primaryType="nt:unstructured"/>
+            </jcr:content>
+        </sample-blank>
+        <sample-cardsnobackground jcr:primaryType="nt:unstructured" title="Cards - No Background" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" bottompadding="20" showbutton="true"
+                         showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff">
+                <cards jcr:primaryType="nt:unstructured">
+                    <cards0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right"
+                            image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                            imagealttext="Organized rope hanging on a winch"
+                            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                            title="Card One"/>
+                    <cards1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right"
+                            image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                            imagealttext="Several sets of rope"
+                            text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                            title="Card Two"/>
+                    <cards2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right"
+                            image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                            imagealttext="Messy pile of rope"
+                            text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                            title="Card Three"/>
+                    <cards3 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right"
+                            image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                            imagealttext="Messy pile of rope"
+                            text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                            title="Card Four"/>
+                </cards>
+            </jcr:content>
+        </sample-cardsnobackground>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Cards With Full RTE" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" bottompadding="20" showbutton="true"
+                         showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true"
+                         cardcolor="#eeeeee">
+                <cards jcr:primaryType="nt:unstructured">
+                    <cards0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="primary" buttonsize="default"
+                            image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                            imagealttext="Organized rope hanging on a winch"
+                            text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                            title="Card One"/>
+                    <cards1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="primary" buttonsize="default"
+                            image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                            imagealttext="Several sets of rope"
+                            text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                            title="Card Two"/>
+                    <cards2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                            buttontext="View" buttoncolor="primary" buttonsize="default"
+                            image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                            imagealttext="Messy pile of rope"
+                            text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                            title="Card Three"/>
+                </cards>
+            </jcr:content>
+        </sample-rte>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/template.vue
index 9670fbef0..72ad4640c 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/cards/template.vue
@@ -1,9 +1,9 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="flex flex-wrap md:-mx-3"
-    v-else>
-      <div class="card my-3 px-0 md:px-3" v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="flex flex-wrap md:-mx-3"
+             v-else>
+            <div class="card my-3 px-0 md:px-3" v-bind:class="{
             'lg:w-full': model.cardsperrow == 1,
             'lg:w-1/2': model.cardsperrow == 2,
             'lg:w-1/3': model.cardsperrow == 3,
@@ -23,8 +23,9 @@
             'w-1/5': model.cardsperrowmobile == 5,
             'w-1/6': model.cardsperrowmobile == 6,
         }" v-for="(item, i) in model.cards" :key="item.path || i">
-        <div class="flex flex-col h-full overflow-hidden" v-bind:style="`background-color:${model.customcardcolor === 'true' &amp;&amp; model.showcard === 'true' ? model.cardcolor: ''};`"
-        v-bind:class="{
+                <div class="flex flex-col h-full overflow-hidden"
+                     v-bind:style="`background-color:${model.customcardcolor === 'true' &amp;&amp; model.showcard === 'true' ? model.cardcolor: ''};`"
+                     v-bind:class="{
             'card--bg': model.showcard === 'true' || model.customcardcolor === 'true',
             'bg-secondary': model.showcard === 'true' &amp;&amp; model.customcardcolor !== 'true',
             'border border-solid': (model.customcardcolor !== 'true') &amp;&amp; model.cardborder === 'true',
@@ -33,22 +34,24 @@
             'rounded': model.roundedcorners == 'medium',
             'rounded-lg': model.roundedcorners == 'large'
         }">
-          <div class="self-center" v-bind:style="{width: item.imagewidth + &quot;%&quot;}">
-            <v-lazy-image v-bind:class="model.showcard === 'true' ||  model.cardborder === 'true' ? 'card-img w-full' : 'card-img mb-3 w-full'"
-            v-bind:src="$helper.pathToUrl(item.image)" v-bind:alt="item.imagealttext"
-            v-bind:src-placeholder="placeholderSrc(item)" v-if="item.image"></v-lazy-image>
-          </div>
-          <div class="flex flex-grow flex-col justify-between p-0" v-bind:class="{
+                    <div class="self-center" v-bind:style="{width: item.imagewidth + &quot;%&quot;}">
+                        <v-lazy-image
+                            v-bind:class="model.showcard === 'true' ||  model.cardborder === 'true' ? 'card-img w-full' : 'card-img mb-3 w-full'"
+                            v-bind:src="$helper.pathToUrl(item.image)" v-bind:alt="item.imagealttext"
+                            v-bind:src-placeholder="placeholderSrc(item)" v-if="item.image"></v-lazy-image>
+                    </div>
+                    <div class="flex flex-grow flex-col justify-between p-0" v-bind:class="{
             'p-6': model.showcard === 'true' || model.cardborder === 'true'
         }">
-            <div>
-              <h2 class="text-xl mb-3" v-if="model.showtitle == 'true'" v-bind:data-per-inline="`model.cards.${i}.title`"
-              v-bind:style="`color:${item.color};`">{{item.title}}</h2>
-              <div v-if="model.showtext == 'true'" v-html="item.text"
-              v-bind:data-per-inline="`model.cards.${i}.text`"></div>
-            </div>
-            <a class="btn mt-3" v-if="showbutton(item)" v-bind:href="$helper.pathToUrl(item.buttonlink)"
-            v-bind:class="{
+                        <div>
+                            <h2 class="text-xl mb-3" v-if="model.showtitle == 'true'"
+                                v-bind:data-per-inline="`model.cards.${i}.title`"
+                                v-bind:style="`color:${item.color};`">{{ item.title }}</h2>
+                            <div v-if="model.showtext == 'true'" v-html="item.text"
+                                 v-bind:data-per-inline="`model.cards.${i}.text`"></div>
+                        </div>
+                        <a class="btn mt-3" v-if="showbutton(item)" v-bind:href="$helper.pathToUrl(item.buttonlink)"
+                           v-bind:class="{
             'btn-lg': item.buttonsize === 'large',
             'btn-sm': item.buttonsize === 'small',
             'btn-primary': item.buttoncolor === 'primary',
@@ -60,32 +63,32 @@
             'self-center': item.buttonalign === 'center',
             'self-end': item.buttonalign === 'right',
             'my-3': model.cardborder !== 'true' &amp;&amp; model.showcard !== 'true'
-        }" v-bind:data-per-inline="`model.cards.${i}.buttontext`">{{item.buttontext}}</a>
-          </div>
+        }" v-bind:data-per-inline="`model.cards.${i}.buttontext`">{{ item.buttontext }}</a>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </themecleanflex-components-block>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-  export default {
-      props: ['model'],
-      computed: {
-          isEditAndEmpty() {
-              if(!$peregrineApp.isAuthorMode()) return false
-              return this.$helper.areAllEmpty(this.model.cards)
-          }
-      },
-      methods: {
-          showbutton(card) {
-            return this.model.showbutton === 'true' && card.buttontext.length
-          },
-          placeholderSrc(item) {
-            const size = item.imageSize
-            return size ? `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size.width} ${size.height}"%3E%3C/svg%3E` : null
-          }
-      }
-  }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.cards);
+        },
+    },
+    methods: {
+        showbutton(card) {
+            return this.model.showbutton === 'true' && card.buttontext.length;
+        },
+        placeholderSrc(item) {
+            const size = item.imageSize;
+            return size ? `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ size.width } ${ size.height }"%3E%3C/svg%3E` : null;
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/.content.xml
index 99bb17d20..c06dde875 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/.content.xml
@@ -1,38 +1,67 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Carousel - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Carousel - Example" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" blockwidth="full" captionbg="true" colorscheme="light" carouselheight="45" toppadding="0" bottompadding="0">
-        <slides jcr:primaryType="nt:unstructured">
-          <slides0 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2>Slide One Title&lt;/h2>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p>" alt="Sailboats in front of city skyline and sunset"/>
-          <slides1 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2>Slide Two Title&lt;/h2>&lt;p>Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p>" alt="Sailboat sailing on a lake"/>
-          <slides2 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2>Slide Three Title&lt;/h2>&lt;p>Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p>" alt="Sailboats sailing on an ocean"/>
-        </slides>
-      </jcr:content>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Carousel" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured">
-        <slides jcr:primaryType="nt:unstructured"/>
-      </jcr:content>
-    </sample-blank>
-    <sample-owl jcr:primaryType="nt:unstructured" title="Carousel - Owl" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" blockwidth="article" captionbg="true" colorscheme="none" indicators="false" autoplay="true" carouselheight="10" toppadding="10" wrap="true" itemsperpage="3" bottompadding="10">
-        <slides jcr:primaryType="nt:unstructured">
-          <slides0 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg"/>
-          <slides1 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg"/>
-          <slides2 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg"/>
-          <slides3 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg"/>
-        </slides>
-      </jcr:content>
-    </sample-owl>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Carousel With Full RTE" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" carouselheight="80" toppadding="20" bottompadding="20">
-        <slides jcr:primaryType="nt:unstructured">
-          <slides0 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" alt="Sailboats in front of city skyline and sunset"/>
-          <slides1 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake"/>
-          <slides2 jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean"/>
-        </slides>
-      </jcr:content>
-    </sample-rte>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Carousel - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Carousel - Example" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" blockwidth="full" captionbg="true" colorscheme="light"
+                         carouselheight="45" toppadding="0" bottompadding="0">
+                <slides jcr:primaryType="nt:unstructured">
+                    <slides0 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                             imagefit="cover"
+                             text="&lt;h2>Slide One Title&lt;/h2>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p>"
+                             alt="Sailboats in front of city skyline and sunset"/>
+                    <slides1 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                             text="&lt;h2>Slide Two Title&lt;/h2>&lt;p>Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p>"
+                             alt="Sailboat sailing on a lake"/>
+                    <slides2 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg"
+                             imagefit="cover"
+                             text="&lt;h2>Slide Three Title&lt;/h2>&lt;p>Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p>"
+                             alt="Sailboats sailing on an ocean"/>
+                </slides>
+            </jcr:content>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Carousel" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured">
+                <slides jcr:primaryType="nt:unstructured"/>
+            </jcr:content>
+        </sample-blank>
+        <sample-owl jcr:primaryType="nt:unstructured" title="Carousel - Owl" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" blockwidth="article" captionbg="true" colorscheme="none"
+                         indicators="false" autoplay="true" carouselheight="10" toppadding="10" wrap="true"
+                         itemsperpage="3" bottompadding="10">
+                <slides jcr:primaryType="nt:unstructured">
+                    <slides0 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/icons/google.svg"/>
+                    <slides1 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/icons/facebook.svg"/>
+                    <slides2 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/icons/linkedin.svg"/>
+                    <slides3 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/icons/pinterest.svg"/>
+                </slides>
+            </jcr:content>
+        </sample-owl>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Carousel With Full RTE" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" carouselheight="80" toppadding="20" bottompadding="20">
+                <slides jcr:primaryType="nt:unstructured">
+                    <slides0 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                             imagefit="cover"
+                             text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                             alt="Sailboats in front of city skyline and sunset"/>
+                    <slides1 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                             text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                             alt="Sailboat sailing on a lake"/>
+                    <slides2 jcr:primaryType="nt:unstructured"
+                             imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg"
+                             imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                             alt="Sailboats sailing on an ocean"/>
+                </slides>
+            </jcr:content>
+        </sample-rte>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/template.vue
index 1579ad424..8f52aab52 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/carousel/template.vue
@@ -1,50 +1,55 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <carousel class="w-full" v-bind:autoplay="model.autoplay === 'true'"
-    v-bind:navigationEnabled="model.controls === 'true'" v-bind:paginationEnabled="model.indicators === 'true'"
-    v-bind:autoplayHoverPause="model.pause === 'true'" v-bind:centerMode="true"
-    v-bind:loop="model.wrap === 'true'" v-bind:autoplayTimeout="model.interval * 1000"
-    v-bind:perPage="model.itemsperpage" v-else>
-      <slide v-for="(item, i) in model.slides" :key="item.path || i">
-        <div class="relative overflow-hidden flex flex-col justify-center" v-bind:style="`height:${model.carouselheight}vh;maxHeight:${model.carouselheight}vh;`">
-          <a class="absolute inset-0 z-10" v-if="item.slidelink" v-bind:href="item.slidelink"></a>
-          <v-lazy-image class="absolute top-0 w-full h-full object-center" v-if="item.imagepath"
-          v-bind:src="item.imagepath" v-bind:alt="item.alt" v-bind:class="item.imagefit === 'cover' ? 'object-cover' : 'object-contain'"></v-lazy-image>
-          <figcaption class="relative w-full h-full flex flex-col justify-center items-center text-lg font-medium"
-          v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <carousel class="w-full" v-bind:autoplay="model.autoplay === 'true'"
+                  v-bind:navigationEnabled="model.controls === 'true'"
+                  v-bind:paginationEnabled="model.indicators === 'true'"
+                  v-bind:autoplayHoverPause="model.pause === 'true'" v-bind:centerMode="true"
+                  v-bind:loop="model.wrap === 'true'" v-bind:autoplayTimeout="model.interval * 1000"
+                  v-bind:perPage="model.itemsperpage" v-else>
+            <slide v-for="(item, i) in model.slides" :key="item.path || i">
+                <div class="relative overflow-hidden flex flex-col justify-center"
+                     v-bind:style="`height:${model.carouselheight}vh;maxHeight:${model.carouselheight}vh;`">
+                    <a class="absolute inset-0 z-10" v-if="item.slidelink" v-bind:href="item.slidelink"></a>
+                    <v-lazy-image class="absolute top-0 w-full h-full object-center" v-if="item.imagepath"
+                                  v-bind:src="item.imagepath" v-bind:alt="item.alt"
+                                  v-bind:class="item.imagefit === 'cover' ? 'object-cover' : 'object-contain'"></v-lazy-image>
+                    <figcaption
+                        class="relative w-full h-full flex flex-col justify-center items-center text-lg font-medium"
+                        v-bind:class="{
             'pb-12': model.indicators === 'true',
             'with-bg': model.captionbg === 'true' &amp;&amp; (model.colorscheme === 'light' || model.colorscheme === 'dark')
         }">
-            <div class="container">
-              <div class="px-4 sm:px-0 sm:w-full md:w-4/5 lg:w-1/2" v-if="item.text"
-              v-html="item.text" v-bind:data-per-inline="`model.slides.${i}.text`"></div>
-            </div>
-          </figcaption>
-        </div>
-      </slide>
-    </carousel>
-  </themecleanflex-components-block>
+                        <div class="container">
+                            <div class="px-4 sm:px-0 sm:w-full md:w-4/5 lg:w-1/2" v-if="item.text"
+                                 v-html="item.text" v-bind:data-per-inline="`model.slides.${i}.text`"></div>
+                        </div>
+                    </figcaption>
+                </div>
+            </slide>
+        </carousel>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-  import { Carousel, Slide } from 'vue-carousel';
+import { Carousel, Slide } from 'vue-carousel';
 
-  export default {
+
+export default {
     props: ['model'],
     computed: {
-      name() {
-          return this.model.path.split('/').slice(1).join('-').slice(4)
-      },
-      isEditAndEmpty() {
-          if(!$peregrineApp.isAuthorMode()) return false
-          //return (this.model.cards.length === 0)
-          return this.$helper.areAllEmpty(this.model.slides)
-      }
+        name() {
+            return this.model.path.split('/').slice(1).join('-').slice(4);
+        },
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            //return (this.model.cards.length === 0)
+            return this.$helper.areAllEmpty(this.model.slides);
+        },
     },
     components: {
-      Carousel,
-      Slide
+        Carousel,
+        Slide,
     },
-  }
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/.content.xml
index a6db91a21..1a36fb94d 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/.content.xml
@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Code - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Code - Example" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="var a = {};" language="javascript"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Code" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="" language=""/>
-    </sample-blank>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Code - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Code - Example" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="var a = {};" language="javascript"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Code" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="" language=""/>
+        </sample-blank>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/template.vue
index 580624063..928ca1a9e 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/code/template.vue
@@ -1,42 +1,43 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <pre class="overflow-x-auto" v-bind:class="'language-'+model.language+ ((model.classes) ? ' '+model.classes : '')"
-    v-else><code v-bind:class="'language-'+model.language" v-html="code"></code>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <pre class="overflow-x-auto"
+             v-bind:class="'language-'+model.language+ ((model.classes) ? ' '+model.classes : '')"
+             v-else><code v-bind:class="'language-'+model.language" v-html="code"></code>
     </pre>
-  </themecleanflex-components-block>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-          code() {
+export default {
+    props: ['model'],
+    computed: {
+        code() {
             let lang = this.model.language;
-            if(window.Prism) {
-              if(!lang || !Prism.languages[lang]) {
-                lang = 'javascript';
-              }
-              return Prism.highlight(this.model.text ? this.model.text : '', Prism.languages[lang], lang)
+            if (window.Prism) {
+                if (!lang || !Prism.languages[lang]) {
+                    lang = 'javascript';
+                }
+                return Prism.highlight(this.model.text ? this.model.text : '', Prism.languages[lang], lang);
             } else {
-              return this.model.text;
+                return this.model.text;
             }
-          },
-        	isEditAndEmpty() {
-            if(!$peregrineApp.isAuthorMode()) return false
-            return this.$helper.areAllEmpty(this.model.text);
-          }
         },
-        mounted: function() {
-          if(window.Prism) {
-            Prism.highlightAllUnder(this.$el)
-          }
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.text);
         },
-        updated: function() {
-          if(window.Prism) {
-            Prism.highlightAllUnder(this.$el)
-          }
+    },
+    mounted: function() {
+        if (window.Prism) {
+            Prism.highlightAllUnder(this.$el);
+        }
+    },
+    updated: function() {
+        if (window.Prism) {
+            Prism.highlightAllUnder(this.$el);
         }
-    }
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/.content.xml
index ed3d4e8fa..bc38a2f02 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/.content.xml
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Container" group="Chrome">
-  <jcr:content jcr:primaryType="nt:unstructured"/>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Container" group="Chrome">
+    <jcr:content jcr:primaryType="nt:unstructured"/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/template.vue
index ebc4c6154..7a14dce74 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/container/template.vue
@@ -1,6 +1,6 @@
 <template>
-  <component v-bind:data-per-path="model.path" v-bind:is="model.htmlelement || &quot;div&quot;"
-  v-bind:class="{
+    <component v-bind:data-per-path="model.path" v-bind:is="model.htmlelement || &quot;div&quot;"
+               v-bind:class="{
             'lg:flex-grow': model.width === 'auto',
             'lg:w-full': model.width === 'custom' &amp;&amp; model.colspan == 12,
             [`lg:w-${model.colspan}/12 lg:flex-grow-0`]: model.width === 'custom' &amp;&amp; model.colspan &lt; 12,
@@ -12,22 +12,25 @@
             [`w-${model.mobilecolspan}/12 flex-grow-0`]: model.mobilewidth === 'custom' &amp;&amp; model.mobilecolspan &lt; 12,
             [`${model.component}`]: model.component
         }">
-    <pagerendervue-components-placeholder v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
-    v-bind:model="{ path: model.path, component: model.component, location: 'before' }"></pagerendervue-components-placeholder>
-    <pagerendervue-components-placeholder
-    v-if="model.children.length === 0" v-bind:model="{ path: model.path, component: model.component + ': drop component here', location: 'into' }"
-    class="per-drop-target-empty"></pagerendervue-components-placeholder>
-      <template v-for="(child, i) in model.children">
-        <component v-bind:key="child.path || i" v-bind:is="child.component" v-bind:model="child"></component>
-      </template>
-      <pagerendervue-components-placeholder v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
-      v-bind:model="{ path: model.path, component: model.component, location: 'after' }"></pagerendervue-components-placeholder>
-  </component>
+        <pagerendervue-components-placeholder
+            v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
+            v-bind:model="{ path: model.path, component: model.component, location: 'before' }"></pagerendervue-components-placeholder>
+        <pagerendervue-components-placeholder
+            v-if="model.children.length === 0"
+            v-bind:model="{ path: model.path, component: model.component + ': drop component here', location: 'into' }"
+            class="per-drop-target-empty"></pagerendervue-components-placeholder>
+        <template v-for="(child, i) in model.children">
+            <component v-bind:key="child.path || i" v-bind:is="child.component" v-bind:model="child"></component>
+        </template>
+        <pagerendervue-components-placeholder
+            v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
+            v-bind:model="{ path: model.path, component: model.component, location: 'after' }"></pagerendervue-components-placeholder>
+    </component>
 </template>
 
 <script>
-    export default {
-        props: ['model']
-    }
+export default {
+    props: ['model'],
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/.content.xml
index 8bae864f5..b43a81a96 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/.content.xml
@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Container Block" group="Chrome">
-  <jcr:content jcr:primaryType="nt:unstructured"/>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Container Block"
+          group="Chrome">
+    <jcr:content jcr:primaryType="nt:unstructured"/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/template.vue
index 1780557e0..7ee8b27f7 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/containerblock/template.vue
@@ -1,23 +1,26 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="flex flex-wrap w-full" v-bind:data-per-path="model.path" v-bind:class="model.alignitems">
-      <pagerendervue-components-placeholder v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
-      v-bind:model="{ path: model.path, component: model.component, location: 'before' }"></pagerendervue-components-placeholder>
-      <pagerendervue-components-placeholder
-      v-if="model.children.length === 0" v-bind:model="{ path: model.path, component: model.component + ': drop component here', location: 'into' }"
-      class="per-drop-target-empty"></pagerendervue-components-placeholder>
-        <template v-for="(child, i) in model.children">
-          <component v-bind:key="child.path || i" v-bind:is="child.component" v-bind:model="child"></component>
-        </template>
-        <pagerendervue-components-placeholder v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
-        v-bind:model="{ path: model.path, component: model.component, location: 'after' }"></pagerendervue-components-placeholder>
-    </div>
-  </themecleanflex-components-block>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="flex flex-wrap w-full" v-bind:data-per-path="model.path" v-bind:class="model.alignitems">
+            <pagerendervue-components-placeholder
+                v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
+                v-bind:model="{ path: model.path, component: model.component, location: 'before' }"></pagerendervue-components-placeholder>
+            <pagerendervue-components-placeholder
+                v-if="model.children.length === 0"
+                v-bind:model="{ path: model.path, component: model.component + ': drop component here', location: 'into' }"
+                class="per-drop-target-empty"></pagerendervue-components-placeholder>
+            <template v-for="(child, i) in model.children">
+                <component v-bind:key="child.path || i" v-bind:is="child.component" v-bind:model="child"></component>
+            </template>
+            <pagerendervue-components-placeholder
+                v-if="(model.fromTemplate &amp;&amp; model.children.length &gt; 0 &amp;&amp; model.children[0].fromTemplate) ? false: model.children.length &gt; 0"
+                v-bind:model="{ path: model.path, component: model.component, location: 'after' }"></pagerendervue-components-placeholder>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model']
-    }
+export default {
+    props: ['model'],
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/.content.xml
index 8741f3210..85bc3369d 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/.content.xml
@@ -1,58 +1,92 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Footer - Dark">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Footer - Dark" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-          <columns0 jcr:primaryType="nt:unstructured" title="" text=""/>
-          <columns1 jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p>email@email.com&lt;br>1-800-888-8888&lt;/p>"/>
-          <columns2 jcr:primaryType="nt:unstructured" title="Location" text="&lt;p>1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p>"/>
-        </columns>
-        <icons jcr:primaryType="nt:unstructured">
-          <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook"/>
-          <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter"/>
-          <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram"/>
-          <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest"/>
-          <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube"/>
-        </icons>
-      </jcr:content>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Footer" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured">
-        <coluimns jcr:primaryType="nt:unstructured"/>
-      </jcr:content>
-    </sample-blank>
-    <sample-light jcr:primaryType="nt:unstructured" title="Footer - light" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-          <columns0 jcr:primaryType="nt:unstructured" title="" text=""/>
-          <columns1 jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p>email@email.com&lt;br>1-800-888-8888&lt;/p>"/>
-          <columns2 jcr:primaryType="nt:unstructured" title="Location" text="&lt;p>1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p>"/>
-        </columns>
-        <icons jcr:primaryType="nt:unstructured">
-          <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook"/>
-          <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter"/>
-          <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram"/>
-          <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest"/>
-          <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube"/>
-        </icons>
-      </jcr:content>
-    </sample-light>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Footer With All RTE Styles" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-          <columns0 jcr:primaryType="nt:unstructured" title="" text=""/>
-          <columns1 jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p>email@email.com&lt;br>1-800-888-8888&lt;/p>"/>
-          <columns2 jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"/>
-        </columns>
-        <icons jcr:primaryType="nt:unstructured">
-          <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook"/>
-          <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter"/>
-          <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram"/>
-          <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest"/>
-          <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube"/>
-        </icons>
-      </jcr:content>
-    </sample-rte>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Footer - Dark">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Footer - Dark" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee"
+                         bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true"
+                         logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                         logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                         copyright="Copyright 2017 Peregrine - All Rights Reserved">
+                <columns jcr:primaryType="nt:unstructured">
+                    <columns0 jcr:primaryType="nt:unstructured" title="" text=""/>
+                    <columns1 jcr:primaryType="nt:unstructured" title="Contact"
+                              text="&lt;p>email@email.com&lt;br>1-800-888-8888&lt;/p>"/>
+                    <columns2 jcr:primaryType="nt:unstructured" title="Location"
+                              text="&lt;p>1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p>"/>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                            iconalttext="Facebook"/>
+                    <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                            iconalttext="Twitter"/>
+                    <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                            iconalttext="Instagram"/>
+                    <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                            iconalttext="Pinterest"/>
+                    <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                            iconalttext="Youtube"/>
+                </icons>
+            </jcr:content>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Footer" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured">
+                <coluimns jcr:primaryType="nt:unstructured"/>
+            </jcr:content>
+        </sample-blank>
+        <sample-light jcr:primaryType="nt:unstructured" title="Footer - light" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee"
+                         bottompadding="0" toppadding="30" colorscheme="light" showlogo="true"
+                         logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                         logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                         copyright="Copyright 2017 Peregrine - All Rights Reserved">
+                <columns jcr:primaryType="nt:unstructured">
+                    <columns0 jcr:primaryType="nt:unstructured" title="" text=""/>
+                    <columns1 jcr:primaryType="nt:unstructured" title="Contact"
+                              text="&lt;p>email@email.com&lt;br>1-800-888-8888&lt;/p>"/>
+                    <columns2 jcr:primaryType="nt:unstructured" title="Location"
+                              text="&lt;p>1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p>"/>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                            iconalttext="Facebook"/>
+                    <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                            iconalttext="Twitter"/>
+                    <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                            iconalttext="Instagram"/>
+                    <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                            iconalttext="Pinterest"/>
+                    <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                            iconalttext="Youtube"/>
+                </icons>
+            </jcr:content>
+        </sample-light>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Footer With All RTE Styles" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee"
+                         bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true"
+                         logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                         logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                         copyright="Copyright 2017 Peregrine - All Rights Reserved">
+                <columns jcr:primaryType="nt:unstructured">
+                    <columns0 jcr:primaryType="nt:unstructured" title="" text=""/>
+                    <columns1 jcr:primaryType="nt:unstructured" title="Contact"
+                              text="&lt;p>email@email.com&lt;br>1-800-888-8888&lt;/p>"/>
+                    <columns2 jcr:primaryType="nt:unstructured" title="Location"
+                              text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"/>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                            iconalttext="Facebook"/>
+                    <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                            iconalttext="Twitter"/>
+                    <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                            iconalttext="Instagram"/>
+                    <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                            iconalttext="Pinterest"/>
+                    <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                            iconalttext="Youtube"/>
+                </icons>
+            </jcr:content>
+        </sample-rte>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/template.vue
index 45eed4346..3afaf7202 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/footer/template.vue
@@ -1,38 +1,39 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full" v-else>
-      <div class="flex flex-col lg:flex-row justify-between">
-        <a v-if="model.showlogo === 'true' &amp;&amp; model.logo" v-bind:href="$helper.pathToUrl(model.logourl)">
-          <img class="mb-3" v-bind:src="$helper.pathToUrl(model.logo)" v-bind:alt="model.logoalttext"
-          v-bind:style="`height:${parseInt(model.logosize)}px;`">
-        </a>
-        <div class="footer-col flex-1 lg:mx-4" v-for="(item, i) in model.columns"
-        :key="item.path || i">
-          <h2 class="text-lg font-bold my-2" v-if="item.title !== ''"
-          v-bind:data-per-inline="`model.columns.${i}.title`">{{item.title}}</h2>
-          <div v-if="item.text !== ''" v-html="item.text"
-          v-bind:data-per-inline="`model.columns.${i}.text`"></div>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full" v-else>
+            <div class="flex flex-col lg:flex-row justify-between">
+                <a v-if="model.showlogo === 'true' &amp;&amp; model.logo"
+                   v-bind:href="$helper.pathToUrl(model.logourl)">
+                    <img class="mb-3" v-bind:src="$helper.pathToUrl(model.logo)" v-bind:alt="model.logoalttext"
+                         v-bind:style="`height:${parseInt(model.logosize)}px;`">
+                </a>
+                <div class="footer-col flex-1 lg:mx-4" v-for="(item, i) in model.columns"
+                     :key="item.path || i">
+                    <h2 class="text-lg font-bold my-2" v-if="item.title !== ''"
+                        v-bind:data-per-inline="`model.columns.${i}.title`">{{ item.title }}</h2>
+                    <div v-if="item.text !== ''" v-html="item.text"
+                         v-bind:data-per-inline="`model.columns.${i}.text`"></div>
+                </div>
+            </div>
+            <hr class="border-b">
+            <div class="flex items-center flex-wrap justify-between">
+                <p class="my-3" v-bind:data-per-inline="`model.copyright`">{{ model.copyright }}</p>
+                <themecleanflex-components-socialicons v-bind:model="model"></themecleanflex-components-socialicons>
+            </div>
         </div>
-      </div>
-      <hr class="border-b">
-      <div class="flex items-center flex-wrap justify-between">
-        <p class="my-3" v-bind:data-per-inline="`model.copyright`">{{model.copyright}}</p>
-        <themecleanflex-components-socialicons v-bind:model="model"></themecleanflex-components-socialicons>
-      </div>
-    </div>
-  </themecleanflex-components-block>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-        	isEditAndEmpty() {
-                if(!$peregrineApp.isAuthorMode()) return false
-                return this.$helper.areAllEmpty(this.model.showlogo === 'true', this.model.columns,  this.model.copyright, this.model.icons)
-            }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.showlogo === 'true', this.model.columns, this.model.copyright, this.model.icons);
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/.content.xml
index fcc2cd8c0..907a37138 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/.content.xml
@@ -1,32 +1,46 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Navigation Header - Light">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Navigation Header - Light" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" elevation="1" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark">
-        <links jcr:primaryType="nt:unstructured">
-          <links0 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"/>
-          <links1 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"/>
-          <links2 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"/>
-        </links>
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary"/>
-        </buttons>
-      </jcr:content>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Navigation Header" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-    <sample-dark jcr:primaryType="nt:unstructured" title="Navigation Header - Dark" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" elevation="1" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light">
-        <links jcr:primaryType="nt:unstructured">
-          <links0 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"/>
-          <links1 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"/>
-          <links2 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"/>
-        </links>
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary"/>
-        </buttons>
-      </jcr:content>
-    </sample-dark>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component"
+          jcr:title="Navigation Header - Light">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Navigation Header - Light" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee"
+                         colorscheme="light" elevation="1" toppadding="10" bottompadding="10"
+                         bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                         logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                         logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60"
+                         buttonsize="default" linkcolor="dark">
+                <links jcr:primaryType="nt:unstructured">
+                    <links0 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"/>
+                    <links1 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"/>
+                    <links2 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"/>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="Try It Now" buttoncolor="primary"/>
+                </buttons>
+            </jcr:content>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Navigation Header" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+        <sample-dark jcr:primaryType="nt:unstructured" title="Navigation Header - Dark" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee"
+                         colorscheme="dark" elevation="1" toppadding="10" bottompadding="10"
+                         bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                         logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                         logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60"
+                         buttonsize="default" linkcolor="light">
+                <links jcr:primaryType="nt:unstructured">
+                    <links0 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"/>
+                    <links1 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"/>
+                    <links2 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"/>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="Try It Now" buttoncolor="primary"/>
+                </buttons>
+            </jcr:content>
+        </sample-dark>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/template.vue
index 99786fcb2..8987dff96 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/header/template.vue
@@ -1,73 +1,75 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <nav class="w-full" v-else>
-      <div class="flex w-full justify-between items-center">
-        <!-- Logo -->
-        <a v-if="model.logo" v-bind:href="$helper.pathToUrl(model.logourl)">
-          <img v-bind:src="$helper.pathToUrl(model.logo)" v-bind:alt="model.logoalttext"
-          v-bind:style="`height:${parseInt(model.logosize)}px;`">
-        </a>
-        <!-- Collapsible Menu -->
-        <div class="hidden md:flex justify-end" v-bind:class="{'md:hidden': model.collapsed === 'true'}">
-          <themecleanflex-components-textlinks v-bind:model="model"></themecleanflex-components-textlinks>
-          <themecleanflex-components-menubuttons
-          v-bind:model="model"></themecleanflex-components-menubuttons>
-        </div>
-        <div class="font-bold text-xl cursor-pointer block md:hidden transform-rotate-90"
-        v-on:click="toggleMenu" v-if="model.buttons &amp;&amp; model.buttons.length &gt; 0 || model.links &amp;&amp;  model.links.length &gt; 0"
-        v-bind:style="{display: model.collapsed === 'true' ? 'flex': false}">|||</div>
-      </div>
-      <div v-bind:style="`height:${menuActive ? menuHeight + 'px' : '0px'};`"
-      v-bind:class="{'invisible': !menuActive}">
-        <div ref="autoHeight" class="p-4 flex flex-col md:flex-row justify-end">
-          <themecleanflex-components-textlinks v-bind:model="model"></themecleanflex-components-textlinks>
-          <themecleanflex-components-menubuttons
-          v-bind:model="model"></themecleanflex-components-menubuttons>
-        </div>
-      </div>
-    </nav>
-  </themecleanflex-components-block>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <nav class="w-full" v-else>
+            <div class="flex w-full justify-between items-center">
+                <!-- Logo -->
+                <a v-if="model.logo" v-bind:href="$helper.pathToUrl(model.logourl)">
+                    <img v-bind:src="$helper.pathToUrl(model.logo)" v-bind:alt="model.logoalttext"
+                         v-bind:style="`height:${parseInt(model.logosize)}px;`">
+                </a>
+                <!-- Collapsible Menu -->
+                <div class="hidden md:flex justify-end" v-bind:class="{'md:hidden': model.collapsed === 'true'}">
+                    <themecleanflex-components-textlinks v-bind:model="model"></themecleanflex-components-textlinks>
+                    <themecleanflex-components-menubuttons
+                        v-bind:model="model"></themecleanflex-components-menubuttons>
+                </div>
+                <div class="font-bold text-xl cursor-pointer block md:hidden transform-rotate-90"
+                     v-on:click="toggleMenu"
+                     v-if="model.buttons &amp;&amp; model.buttons.length &gt; 0 || model.links &amp;&amp;  model.links.length &gt; 0"
+                     v-bind:style="{display: model.collapsed === 'true' ? 'flex': false}">|||
+                </div>
+            </div>
+            <div v-bind:style="`height:${menuActive ? menuHeight + 'px' : '0px'};`"
+                 v-bind:class="{'invisible': !menuActive}">
+                <div ref="autoHeight" class="p-4 flex flex-col md:flex-row justify-end">
+                    <themecleanflex-components-textlinks v-bind:model="model"></themecleanflex-components-textlinks>
+                    <themecleanflex-components-menubuttons
+                        v-bind:model="model"></themecleanflex-components-menubuttons>
+                </div>
+            </div>
+        </nav>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        data: function() {
-          return {
+export default {
+    props: ['model'],
+    data: function() {
+        return {
             menuActive: false,
-            menuHeight: 0
-          }
-        },
-        created() {
-          addEventListener("resize", this.resizeHandler);
-        },
-        destroyed() {
-          removeEventListener("resize", this.resizeHandler);
-        },
-        mounted: function() {
-          this.menuHeight = this.$refs.autoHeight.clientHeight;
-          window.addEventListener('pageRendered', (e) => {
+            menuHeight: 0,
+        };
+    },
+    created() {
+        addEventListener('resize', this.resizeHandler);
+    },
+    destroyed() {
+        removeEventListener('resize', this.resizeHandler);
+    },
+    mounted: function() {
+        this.menuHeight = this.$refs.autoHeight.clientHeight;
+        window.addEventListener('pageRendered', (e) => {
             if (this.menuActive) {
-              this.toggleMenu();
+                this.toggleMenu();
             }
-          }, false);
+        }, false);
+    },
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.logo, this.model.links, this.model.buttons);
         },
-        computed: {
-        	isEditAndEmpty() {
-                if(!$peregrineApp.isAuthorMode()) return false
-                return this.$helper.areAllEmpty(this.model.logo, this.model.links,  this.model.buttons)
-            }
-        },
-        methods: {
-          resizeHandler: function(e) {
-            const height = this.$refs.autoHeight.clientHeight
+    },
+    methods: {
+        resizeHandler: function(e) {
+            const height = this.$refs.autoHeight.clientHeight;
             if (this.menuActive) this.menuActive = false;
             this.menuHeight = height;
-          },
-          toggleMenu: function(){
-            this.menuActive = !this.menuActive
-          }
-        }
-    }
+        },
+        toggleMenu: function() {
+            this.menuActive = !this.menuActive;
+        },
+    },
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/.content.xml
index 043b368f7..b857213a7 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
           jcr:primaryType="per:Component"
           jcr:title="Media"
           group=".hidden">
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/template.vue
index 9308ca715..90ee81520 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/media/template.vue
@@ -1,42 +1,45 @@
 <template>
-  <div class="w-full">
-    <h3 v-if="noMedia" class="w-full text-center">No media content</h3>
-    <div v-else-if="model.mediatype === 'video'" class="relative block w-full p-0 overflow-hidden aspect-ratio-16/9">
-      <iframe :title="model.mediatitle" class="absolute inset-0 w-full h-full" :src="videoSource" frameborder="0" allowfullscreen></iframe>
+    <div class="w-full">
+        <h3 v-if="noMedia" class="w-full text-center">No media content</h3>
+        <div v-else-if="model.mediatype === 'video'"
+             class="relative block w-full p-0 overflow-hidden aspect-ratio-16/9">
+            <iframe :title="model.mediatitle" class="absolute inset-0 w-full h-full" :src="videoSource" frameborder="0"
+                    allowfullscreen></iframe>
+        </div>
+        <v-lazy-image v-else-if="model.mediatype === 'image'" class="w-full" :src="$helper.pathToUrl(model.imagesrc)"
+                      :alt="model.mediatitle"
+                      :src-placeholder="placeholderSrc"></v-lazy-image>
     </div>
-    <v-lazy-image v-else-if="model.mediatype === 'image'" class="w-full" :src="$helper.pathToUrl(model.imagesrc)" :alt="model.mediatitle"
-      :src-placeholder="placeholderSrc"></v-lazy-image>
-  </div>
 </template>
 
 <script>
-  export default {
-    props: ["model"],
+export default {
+    props: ['model'],
     data: function() {
-      return {
-        loadVideo: null
-      }
+        return {
+            loadVideo: null,
+        };
     },
     mounted: function() {
-      this.$nextTick(function () {
-        this.loadVideo = true;
-      })
+        this.$nextTick(function() {
+            this.loadVideo = true;
+        });
     },
     computed: {
-      videoSource() {
-        return this.loadVideo ? this.$helper.pathToUrl(this.model.videosrc) : ""
-      },
-      noMedia() {
-        let { mediatype, videosrc, imagesrc } = this.model
-        if (mediatype !== 'image' && mediatype !== 'video') return true;
-        if (mediatype === 'image' && (imagesrc == null || imagesrc == "")) return true;
-        if (mediatype === 'video' && (videosrc == null || videosrc == "")) return true;
-        return false
-      },
-      placeholderSrc() {
-        const size = this.model.imagesrcSize
-        return size ? `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size.width} ${size.height}"%3E%3C/svg%3E` : null
-      }
-    }
-  }
+        videoSource() {
+            return this.loadVideo ? this.$helper.pathToUrl(this.model.videosrc) : '';
+        },
+        noMedia() {
+            let { mediatype, videosrc, imagesrc } = this.model;
+            if (mediatype !== 'image' && mediatype !== 'video') return true;
+            if (mediatype === 'image' && (imagesrc == null || imagesrc == '')) return true;
+            if (mediatype === 'video' && (videosrc == null || videosrc == '')) return true;
+            return false;
+        },
+        placeholderSrc() {
+            const size = this.model.imagesrcSize;
+            return size ? `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${ size.width } ${ size.height }"%3E%3C/svg%3E` : null;
+        },
+    },
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/.content.xml
index 927bfc61f..3ffb8217a 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/.content.xml
@@ -1,14 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Media - Video">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Media - Video" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Media" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-    <sample-image jcr:primaryType="nt:unstructured" title="Media - Image" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"/>
-    </sample-image>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Media - Video">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Media - Video" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" mediatype="video"
+                         videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video"
+                         toppadding="30" bottompadding="30" backgroundtype="color"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Media" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+        <sample-image jcr:primaryType="nt:unstructured" title="Media - Image" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" mediatype="image"
+                         imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                         mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"/>
+        </sample-image>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/template.vue
index b2f37bbed..526c9cf87 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediablock/template.vue
@@ -1,20 +1,20 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="mx-auto" v-bind:style="{flexBasis:`${model.mediawidth}%`}">
-      <themecleanflex-components-media v-bind:model="model"></themecleanflex-components-media>
-    </div>
-  </themecleanflex-components-block>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="mx-auto" v-bind:style="{flexBasis:`${model.mediawidth}%`}">
+            <themecleanflex-components-media v-bind:model="model"></themecleanflex-components-media>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-	        isEditAndEmpty() {
-	                if(!$peregrineApp.isAuthorMode()) return false
-	                //return !(this.model.imagesrc || this.model.videosrc)
-	                return this.$helper.areAllEmpty(this.model.imagesrc , this.model.videosrc)
-	            }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            //return !(this.model.imagesrc || this.model.videosrc)
+            return this.$helper.areAllEmpty(this.model.imagesrc, this.model.videosrc);
+        },
+    },
+};
 </script>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/.content.xml
index 77115b81b..6b1fdf9bc 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
           jcr:primaryType="per:Component"
           jcr:title="Media Visible"
           group=".hidden">
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/template.vue
index 5e556d9fd..f40493cac 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/mediavisible/template.vue
@@ -1,22 +1,25 @@
 <template>
-  <div class="w-full">
-
-    <div v-if="model.mediatype === 'video'" class="embed-responsive embed-responsive-16by9">
-      <iframe :title="model.mediatitle" :src="$helper.pathToUrl(model.videosrc)" frameborder="0" allowfullscreen></iframe>
-    </div>
-    <v-lazy-image v-if="model.mediatype === 'image'" class="w-full" :src="$helper.pathToUrl(model.imagesrc)" :alt="model.mediatitle"></v-lazy-image>
+    <div class="w-full">
 
+        <div v-if="model.mediatype === 'video'" class="embed-responsive embed-responsive-16by9">
+            <iframe :title="model.mediatitle" :src="$helper.pathToUrl(model.videosrc)" frameborder="0"
+                    allowfullscreen></iframe>
+        </div>
+        <v-lazy-image v-if="model.mediatype === 'image'" class="w-full" :src="$helper.pathToUrl(model.imagesrc)"
+                      :alt="model.mediatitle"></v-lazy-image>
 
 
-  </div>
+    </div>
 </template>
 
 <script>
-  import VLazyImage from 'v-lazy-image';
-  export default {
-    props: ["model"],
+import VLazyImage from 'v-lazy-image';
+
+
+export default {
+    props: ['model'],
     components: {
-      VLazyImage
-    }
-  }
+        VLazyImage,
+    },
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/.content.xml
index 4b58e59ee..9eef6d71b 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/.content.xml
@@ -1,10 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Menu Buttons" group=".hidden">
-  <jcr:content jcr:primaryType="nt:unstructured">
-    <buttons jcr:primaryType="nt:unstructured">
-      <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary"/>
-      <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary"/>
-      <buttons2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning"/>
-    </buttons>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Menu Buttons"
+          group=".hidden">
+    <jcr:content jcr:primaryType="nt:unstructured">
+        <buttons jcr:primaryType="nt:unstructured">
+            <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                      buttontext="Try It Now" buttoncolor="primary"/>
+            <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                      buttontext="Click Here!" buttoncolor="primary"/>
+            <buttons2 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                      buttoncolor="warning"/>
+        </buttons>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/template.vue
index eec801487..223c84fe4 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/menubuttons/template.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex justify-end items-center md:flex-row flex-col">
-    <a class="btn m-2" v-for="(item, i) in model.buttons" :key="item.path || i"
-    v-bind:href="$helper.pathToUrl(item.buttonlink)" v-bind:class="{
+    <div class="flex justify-end items-center md:flex-row flex-col">
+        <a class="btn m-2" v-for="(item, i) in model.buttons" :key="item.path || i"
+           v-bind:href="$helper.pathToUrl(item.buttonlink)" v-bind:class="{
             'btn-lg': model.buttonsize === 'large',
             'btn-sm': model.buttonsize === 'small',
             'btn-primary': item.buttoncolor === 'primary',
@@ -11,13 +11,13 @@
             'btn-warning': item.buttoncolor === 'warning',
             'btn-light': item.buttoncolor === 'light',
             'btn-dark': item.buttoncolor === 'dark'
-        }" v-bind:data-per-inline="`model.buttons.${i}.buttontext`">{{item.buttontext}}</a>
-  </div>
+        }" v-bind:data-per-inline="`model.buttons.${i}.buttontext`">{{ item.buttontext }}</a>
+    </div>
 </template>
 
 <script>
-    export default {
-        props: ['model']
-    }
+export default {
+    props: ['model'],
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/.content.xml
index c993a8d5b..c6fe346ac 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/.content.xml
@@ -1,11 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Multilevel Navigation - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Multilevel Navigation - Example" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Multilevel Navigation" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component"
+          jcr:title="Multilevel Navigation - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Multilevel Navigation - Example" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured" bottompadding="0" toppadding="0"
+                         rootpage="/content/themecleanflex/pages" justifyitems="end"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Multilevel Navigation" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue
index 1cb8b7afb..2280735c1 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue
@@ -1,58 +1,63 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">{{isEditAndEmpty}}</div>
-    <nav class="flex md:flex-row flex-col z-10 w-full"
-    v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">{{ isEditAndEmpty }}</div>
+        <nav class="flex md:flex-row flex-col z-10 w-full"
+             v-bind:class="{
             'justify-start': model.justifyitems === 'start',
             'justify-center': model.justifyitems === 'center',
             'justify-end': model.justifyitems === 'end'
         }" v-else>
-      <div class="flex flex-col dropdown-container" v-for="(child, i) in model.childrenPages"
-      :key="child.path || i">
-        <a class="p-3 no-underline" v-bind:data-per-inline="`model.childrenPages.${i}.title`"
-        v-bind:href="child.childrenPages.length &gt; 0 ? false : child.path +'.html'"
-        v-bind:class="model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'">{{child.title}}</a>
-        <div class="self-stretch" v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0">
-          <div class="flex flex-col dropdown-list">
-            <a class="p-3 no-underline" v-bind:data-per-inline="`model.childrenPages.${i}.title`"
-            v-bind:href="subchild.path + '.html'" v-bind:class="model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'"
-            v-for="(subchild, i) in child.childrenPages" :key="subchild.path || i"
-            data-per-inline="subchild.title">{{subchild.title}}</a>
-          </div>
-        </div>
-      </div>
-    </nav>
-  </themecleanflex-components-block>
+            <div class="flex flex-col dropdown-container" v-for="(child, i) in model.childrenPages"
+                 :key="child.path || i">
+                <a class="p-3 no-underline" v-bind:data-per-inline="`model.childrenPages.${i}.title`"
+                   v-bind:href="child.childrenPages.length &gt; 0 ? false : child.path +'.html'"
+                   v-bind:class="model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'">{{
+                        child.title
+                                                                                                                                                                      }}</a>
+                <div class="self-stretch"
+                     v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0">
+                    <div class="flex flex-col dropdown-list">
+                        <a class="p-3 no-underline" v-bind:data-per-inline="`model.childrenPages.${i}.title`"
+                           v-bind:href="subchild.path + '.html'"
+                           v-bind:class="model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'"
+                           v-for="(subchild, i) in child.childrenPages" :key="subchild.path || i"
+                           data-per-inline="subchild.title">{{ subchild.title }}</a>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        methods: {
-            beforeSave(data) {
-                delete data.childrenPages
-                return data
-            }
+export default {
+    props: ['model'],
+    methods: {
+        beforeSave(data) {
+            delete data.childrenPages;
+            return data;
         },
-        computed: {
-        	isEditAndEmpty() {
-            if(!$peregrineApp.isAuthorMode()) return false;
+    },
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
             if (this.$helper.areAllEmpty(this.model.rootpage)) return 'Please choose a root page';
             if (this.model.childrenPages && this.model.childrenPages.length == 0) return 'Chosen root page has no children (May need reload after root change)';
             return false;
-          }
-        }
-    }
+        },
+    },
+};
 </script>
 
 <style>
-  .flex.dropdown-list {
+.flex.dropdown-list {
     display: none;
     position: fixed;
-  }
-  .flex.dropdown-container:hover .flex.dropdown-list, .flex.dropdown-container:focus-within .flex.dropdown-list {
+}
+
+.flex.dropdown-container:hover .flex.dropdown-list, .flex.dropdown-container:focus-within .flex.dropdown-list {
     display: flex;
-  }
-  
+}
+
 </style>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/.content.xml
index ed7d88d68..d55b3c424 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/.content.xml
@@ -1,32 +1,43 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Note - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Note - Example" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>Here is some example note text default style&lt;/p>" toppadding="30" bottompadding="30"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Note" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-    <sample-caution jcr:primaryType="nt:unstructured" title="Note - Caution" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>caution&lt;/p>" notetype="caution" toppadding="30" bottompadding="30"/>
-    </sample-caution>
-    <sample-important jcr:primaryType="nt:unstructured" title="Note - Important" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>important&lt;/p>" notetype="important" toppadding="30" bottompadding="30"/>
-    </sample-important>
-    <sample-note jcr:primaryType="nt:unstructured" title="Note - Note" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>note&lt;/p>" notetype="note" toppadding="30" bottompadding="30"/>
-    </sample-note>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Note With All RTE Styles" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" toppadding="30" bottompadding="30"/>
-    </sample-rte>
-    <sample-tip jcr:primaryType="nt:unstructured" title="Note - Tip" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>tip&lt;/p>" notetype="tip" toppadding="30" bottompadding="30"/>
-    </sample-tip>
-    <sample-warning-dark jcr:primaryType="nt:unstructured" title="Note - Warning Dark" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>warning&lt;/p>" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30"/>
-    </sample-warning-dark>
-    <sample-warning jcr:primaryType="nt:unstructured" title="Note - Warning" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>warning&lt;/p>" notetype="warning" toppadding="30" bottompadding="30"/>
-    </sample-warning>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Note - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Note - Example" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;p>Here is some example note text default style&lt;/p>" toppadding="30"
+                         bottompadding="30"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Note" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+        <sample-caution jcr:primaryType="nt:unstructured" title="Note - Caution" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>caution&lt;/p>" notetype="caution"
+                         toppadding="30" bottompadding="30"/>
+        </sample-caution>
+        <sample-important jcr:primaryType="nt:unstructured" title="Note - Important" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>important&lt;/p>" notetype="important"
+                         toppadding="30" bottompadding="30"/>
+        </sample-important>
+        <sample-note jcr:primaryType="nt:unstructured" title="Note - Note" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>note&lt;/p>" notetype="note" toppadding="30"
+                         bottompadding="30"/>
+        </sample-note>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Note With All RTE Styles" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                         toppadding="30" bottompadding="30"/>
+        </sample-rte>
+        <sample-tip jcr:primaryType="nt:unstructured" title="Note - Tip" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>tip&lt;/p>" notetype="tip" toppadding="30"
+                         bottompadding="30"/>
+        </sample-tip>
+        <sample-warning-dark jcr:primaryType="nt:unstructured" title="Note - Warning Dark" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>warning&lt;/p>" notetype="warning"
+                         colorscheme="dark" toppadding="30" bottompadding="30"/>
+        </sample-warning-dark>
+        <sample-warning jcr:primaryType="nt:unstructured" title="Note - Warning" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>warning&lt;/p>" notetype="warning"
+                         toppadding="30" bottompadding="30"/>
+        </sample-warning>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/template.vue
index abf50403e..8e64ca137 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/note/template.vue
@@ -1,20 +1,20 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="w-full px-5 py-2 border-l-4 shadow-md" v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="w-full px-5 py-2 border-l-4 shadow-md" v-bind:class="{
             'note-note': model.notetype === &quot;note&quot;,
             'note-tip': model.notetype === &quot;tip&quot;,
             'note-warning': model.notetype === &quot;warning&quot;,
             'note-important': model.notetype === &quot;important&quot;,
             'note-caution': model.notetype === &quot;caution&quot;
         }">
-      <div class="text-black" v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
-    </div>
-  </themecleanflex-components-block>
+            <div class="text-black" v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model']
-    }
+export default {
+    props: ['model'],
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/.content.xml
index 41c6a6965..9cdfd3520 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-  jcr:primaryType="per:Component"
-  sling:resourceSuperType="pagerendervue/structure/page"
-  jcr:title="page component (example site)"
-  group=".hidden"/>
\ No newline at end of file
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          jcr:primaryType="per:Component"
+          sling:resourceSuperType="pagerendervue/structure/page"
+          jcr:title="page component (example site)"
+          group=".hidden"/>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/iconsprites.html b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/iconsprites.html
index a920f86fb..7aa47634f 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/iconsprites.html
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/iconsprites.html
@@ -1 +1,50 @@
-<svg width="0" height="0" style="position:absolute"><symbol viewBox="0 0 512 512" id="facebook" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></symbol><symbol viewBox="0 0 488 512" id="google" xmlns="http://www.w3.org/2000/svg"><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></symbol><symbol viewBox="0 0 448 512" id="instagram" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></symbol><symbol viewBox="0 0 448 512" id="linkedin" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></symbol><symbol viewBox="0 0 496 512" id="pinterest" xmlns="http://www.w3.org/2000/svg"><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></symbol><symbol viewBox="0 0 496 512" id="telegram" xmlns="http://www.w3.org/2000/svg"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/></symbol><symbol viewBox="0 0 320 512" id="tumblr" xmlns="http://www.w3.org/2000/svg"><path d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"/></symbol><symbol viewBox="0 0 448 512" id="twitch" xmlns="http://www.w3.org/2000/svg"><path d="M40.1 32L10 108.9v314.3h107V480h60.2l56.8-56.8h87l117-117V32H40.1zm357.8 254.1L331 353H224l-56.8 56.8V353H76.9V72.1h321v214zM331 149v116.9h-40.1V149H331zm-107 0v116.9h-40.1V149H224z"/></symbol><symbol viewBox="0 0 512 512" id="twitter" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></symbol><symbol viewBox="0 0 512 512" id="yammer" xmlns="http://www.w3.org/2000/svg"><path d="M421.78 152.17A23.06 23.06 0 0 0 400.9 112c-.83.43-1.71.9-2.63 1.4-15.25 8.4-118.33 80.62-106.69 88.77s82.04-23.61 130.2-50zm0 217.17c-48.16-26.38-118.64-58.1-130.2-50s91.42 80.35 106.69 88.74c.92.51 1.8 1 2.63 1.41a23.07 23.07 0 0 0 20.88-40.15zM464.21 237c-.95 0-1.95-.06-3-.06-17.4 0-142.52 13.76-136.24 26.51s83.3 18.74 138.21 18.76a23 23 0 0 0 1-45.21zM31 96.65a24.88 24.88 0 0 1 46.14-18.4l81 205.06h1.21l77-203.53a23.52 23.52 0 0 1 44.45 15.27L171.2 368.44C152.65 415.66 134.08 448 77.91 448a139.67 139.67 0 0 1-23.81-1.95 21.31 21.31 0 0 1 6.9-41.77c.66.06 10.91.66 13.86.66 30.47 0 43.74-18.94 58.07-59.41z"/></symbol><symbol viewBox="0 0 384 512" id="yelp" xmlns="http://www.w3.org/2000/svg"><path d="M42.9 240.32l99.62 48.61c19.2 9.4 16.2 37.51-4.5 42.71L30.5 358.45a22.79 22.79 0 0 1-28.21-19.6 197.16 197.16 0 0 1 9-85.32 22.8 22.8 0 0 1 31.61-13.21zm44 239.25a199.45 199.45 0 0 0 79.42 32.11A22.78 22.78 0 0 0 192.94 490l3.9-110.82c.7-21.3-25.5-31.91-39.81-16.1l-74.21 82.4a22.82 22.82 0 0 0 4.09 34.09zm145.34-109.92l58.81 94a22.93 22.93 0 0 0 34 5.5 198.36 198.36 0 0 0 52.71-67.61A23 23 0 0 0 364.17 370l-105.42-34.26c-20.31-6.5-37.81 15.8-26.51 33.91zm148.33-132.23a197.44 197.44 0 0 0-50.41-69.31 22.85 22.85 0 0 0-34 4.4l-62 91.92c-11.9 17.7 4.7 40.61 25.2 34.71L366 268.63a23 23 0 0 0 14.61-31.21zM62.11 30.18a22.86 22.86 0 0 0-9.9 32l104.12 180.44c11.7 20.2 42.61 11.9 42.61-11.4V22.88a22.67 22.67 0 0 0-24.5-22.8 320.37 320.37 0 0 0-112.33 30.1z"/></symbol><symbol viewBox="0 0 576 512" id="youtube" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></symbol></svg>
\ No newline at end of file
+<svg width="0" height="0" style="position:absolute">
+    <symbol viewBox="0 0 512 512" id="facebook" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/>
+    </symbol>
+    <symbol viewBox="0 0 488 512" id="google" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/>
+    </symbol>
+    <symbol viewBox="0 0 448 512" id="instagram" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
+    </symbol>
+    <symbol viewBox="0 0 448 512" id="linkedin" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
+    </symbol>
+    <symbol viewBox="0 0 496 512" id="pinterest" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/>
+    </symbol>
+    <symbol viewBox="0 0 496 512" id="telegram" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/>
+    </symbol>
+    <symbol viewBox="0 0 320 512" id="tumblr" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"/>
+    </symbol>
+    <symbol viewBox="0 0 448 512" id="twitch" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M40.1 32L10 108.9v314.3h107V480h60.2l56.8-56.8h87l117-117V32H40.1zm357.8 254.1L331 353H224l-56.8 56.8V353H76.9V72.1h321v214zM331 149v116.9h-40.1V149H331zm-107 0v116.9h-40.1V149H224z"/>
+    </symbol>
+    <symbol viewBox="0 0 512 512" id="twitter" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
+    </symbol>
+    <symbol viewBox="0 0 512 512" id="yammer" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M421.78 152.17A23.06 23.06 0 0 0 400.9 112c-.83.43-1.71.9-2.63 1.4-15.25 8.4-118.33 80.62-106.69 88.77s82.04-23.61 130.2-50zm0 217.17c-48.16-26.38-118.64-58.1-130.2-50s91.42 80.35 106.69 88.74c.92.51 1.8 1 2.63 1.41a23.07 23.07 0 0 0 20.88-40.15zM464.21 237c-.95 0-1.95-.06-3-.06-17.4 0-142.52 13.76-136.24 26.51s83.3 18.74 138.21 18.76a23 23 0 0 0 1-45.21zM31 96.65a24.88 24.88 0 0 1 46.14-18.4l81 205.06h1.21l77-203.53a23.52 23.52 0 0 1 44.45 15.27L171.2 368.44C152.65 415.66 134.08 448 77.91 448a139.67 139.67 0 0 1-23.81-1.95 21.31 21.31 0 0 1 6.9-41.77c.66.06 10.91.66 13.86.66 30.47 0 43.74-18.94 58.07-59.41z"/>
+    </symbol>
+    <symbol viewBox="0 0 384 512" id="yelp" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M42.9 240.32l99.62 48.61c19.2 9.4 16.2 37.51-4.5 42.71L30.5 358.45a22.79 22.79 0 0 1-28.21-19.6 197.16 197.16 0 0 1 9-85.32 22.8 22.8 0 0 1 31.61-13.21zm44 239.25a199.45 199.45 0 0 0 79.42 32.11A22.78 22.78 0 0 0 192.94 490l3.9-110.82c.7-21.3-25.5-31.91-39.81-16.1l-74.21 82.4a22.82 22.82 0 0 0 4.09 34.09zm145.34-109.92l58.81 94a22.93 22.93 0 0 0 34 5.5 198.36 198.36 0 0 0 52.71-67.61A23 23 0 0 0 364.17 370l-105.42-34.26c-20.31-6.5-37.81 15.8-26.51 33.91zm148.33-132.23a197.44 197.44 0 0 0-50.41-69.31 22.85 22.85 0 0 0-34 4.4l-62 91.92c-11.9 17.7 4.7 40.61 25.2 34.71L366 268.63a23 23 0 0 0 14.61-31.21zM62.11 30.18a22.86 22.86 0 0 0-9.9 32l104.12 180.44c11.7 20.2 42.61 11.9 42.61-11.4V22.88a22.67 22.67 0 0 0-24.5-22.8 320.37 320.37 0 0 0-112.33 30.1z"/>
+    </symbol>
+    <symbol viewBox="0 0 576 512" id="youtube" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
+    </symbol>
+</svg>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html
index 769f5acbc..3727f099c 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html
@@ -31,13 +31,13 @@
     //     }
     // }
 
-    Vue.use(window.VLazyImage.VLazyImagePlugin)
-    $peregrineApp.loadComponent('pagerendervue-components-placeholder')
-    $peregrineApp.loadComponent('themecleanflex-components-block')
-    $peregrineApp.loadComponent('themecleanflex-components-media')
-    $peregrineApp.loadComponent('themecleanflex-components-mediavisible')
-    $peregrineApp.loadComponent('themecleanflex-components-textlinks')
-    $peregrineApp.loadComponent('themecleanflex-components-menubuttons')
-    $peregrineApp.loadComponent('themecleanflex-components-socialicons')
-    $peregrineApp.loadComponent('themecleanflex-components-pagelistnested')
+    Vue.use(window.VLazyImage.VLazyImagePlugin);
+    $peregrineApp.loadComponent('pagerendervue-components-placeholder');
+    $peregrineApp.loadComponent('themecleanflex-components-block');
+    $peregrineApp.loadComponent('themecleanflex-components-media');
+    $peregrineApp.loadComponent('themecleanflex-components-mediavisible');
+    $peregrineApp.loadComponent('themecleanflex-components-textlinks');
+    $peregrineApp.loadComponent('themecleanflex-components-menubuttons');
+    $peregrineApp.loadComponent('themecleanflex-components-socialicons');
+    $peregrineApp.loadComponent('themecleanflex-components-pagelistnested');
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/serviceworker.html b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/serviceworker.html
index 0a5d7b389..62cb1839d 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/serviceworker.html
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/serviceworker.html
@@ -1,13 +1,13 @@
 <script>
     var enableServiceWorker = $peregrineApp.isPublicFacingSite();
-    if(enableServiceWorker) {
+    if (enableServiceWorker) {
         if (!$peregrineApp.isAuthorMode() && !window.location.host.indexOf('local') >= 0) {
             if ('serviceWorker' in navigator) {
-                window.addEventListener('load', function () {
-                    navigator.serviceWorker.register('/serviceworker.js').then(function (registration) {
+                window.addEventListener('load', function() {
+                    navigator.serviceWorker.register('/serviceworker.js').then(function(registration) {
                         // Registration was successful
                         console.log('ServiceWorker registration successful with scope: ', registration.scope);
-                    }, function (err) {
+                    }, function(err) {
                         // registration failed :(
                         console.log('ServiceWorker registration failed: ', err);
                     });
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/template.vue
index c081e2b22..1fa1f89ab 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/template.vue
@@ -1,40 +1,40 @@
 <template>
     <div v-bind:data-per-path="model.path">
-        <pagerendervue-components-placeholder 
+        <pagerendervue-components-placeholder
             v-if="renderPlaceholder"
             v-bind:model="{ path: model.path, component: model.component, location: 'before' }"></pagerendervue-components-placeholder>
         <pagerendervue-components-placeholder
-            class="per-drop-target-empty" 
+            class="per-drop-target-empty"
             v-if="renderPlaceholderEmpty"
             v-bind:model="{ path: model.path, component: 'page: drop components here',  location: 'into' }"></pagerendervue-components-placeholder>
         <template v-for="child in model.children">
-            <component  
-                v-bind:is="child.component" 
-                v-bind:model="child" 
+            <component
+                v-bind:is="child.component"
+                v-bind:model="child"
                 v-bind:key="child.path"></component>
         </template>
-        <pagerendervue-components-placeholder 
+        <pagerendervue-components-placeholder
             v-if="renderPlaceholder"
             v-bind:model="{ path: model.path, component: model.component, location: 'after' }"></pagerendervue-components-placeholder>
     </div>
 </template>
 
 <script>
-    import VLazyImage from 'v-lazy-image';
-    export default {
-        props: [ 'model' ],
-        computed: {
-            renderPlaceholderEmpty() {
-                return this.model.children.length === 0
-            },
-            renderPlaceholder() {
-                if( this.model.fromTemplate 
-                    && this.model.children.length > 0
-                    && this.model.children[0].fromTemplate) {
-                    return false
-                }
-                return !this.renderPlaceholderEmpty
+
+export default {
+    props: ['model'],
+    computed: {
+        renderPlaceholderEmpty() {
+            return this.model.children.length === 0;
+        },
+        renderPlaceholder() {
+            if (this.model.fromTemplate
+                && this.model.children.length > 0
+                && this.model.children[0].fromTemplate) {
+                return false;
             }
-        }
-    }
+            return !this.renderPlaceholderEmpty;
+        },
+    },
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/.content.xml
index 8b23533db..af3d0222a 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/.content.xml
@@ -1,11 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Page List - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Page List - Example" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Page List" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Page List - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Page List - Example" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" bottompadding="20" toppadding="20"
+                         rootpage="/content/themecleanflex/pages" levels="2"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Page List" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/template.vue
index 051b7b870..091488067 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelist/template.vue
@@ -1,52 +1,54 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">{{isEditAndEmpty}}</div>
-    <div class="w-full" v-else>
-      <ul class="root" v-if="model.includeroot === 'true'">
-        <li class="root">
-          <a v-bind:href="$helper.pathToUrl(model.rootPageLink)">{{model.rootPageTitle}}</a>
-          <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
-          v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
-          <ul class="ml-2">
-            <li class="children ml-2" v-for="(child, i) in model.childrenPages" :key="child.path || i">
-              <a v-bind:href="$helper.pathToUrl(child.path)">{{child.title}}</a>
-              <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
-              v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
-              <themecleanflex-components-pagelistnested v-bind:model="child" v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"></themecleanflex-components-pagelistnested>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <ul class="noroot" v-else>
-        <li class="childrennoroot ml-2" v-for="(child, i) in model.childrenPages"
-        :key="child.path || i">
-          <a v-bind:href="$helper.pathToUrl(child.path)">{{child.title}}</a>
-          <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
-          v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
-          <themecleanflex-components-pagelistnested v-bind:model="child" v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"></themecleanflex-components-pagelistnested>
-        </li>
-      </ul>
-    </div>
-  </themecleanflex-components-block>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">{{ isEditAndEmpty }}</div>
+        <div class="w-full" v-else>
+            <ul class="root" v-if="model.includeroot === 'true'">
+                <li class="root">
+                    <a v-bind:href="$helper.pathToUrl(model.rootPageLink)">{{ model.rootPageTitle }}</a>
+                    <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
+                         v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
+                    <ul class="ml-2">
+                        <li class="children ml-2" v-for="(child, i) in model.childrenPages" :key="child.path || i">
+                            <a v-bind:href="$helper.pathToUrl(child.path)">{{ child.title }}</a>
+                            <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
+                                 v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
+                            <themecleanflex-components-pagelistnested v-bind:model="child"
+                                                                      v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"></themecleanflex-components-pagelistnested>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+            <ul class="noroot" v-else>
+                <li class="childrennoroot ml-2" v-for="(child, i) in model.childrenPages"
+                    :key="child.path || i">
+                    <a v-bind:href="$helper.pathToUrl(child.path)">{{ child.title }}</a>
+                    <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
+                         v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
+                    <themecleanflex-components-pagelistnested v-bind:model="child"
+                                                              v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"></themecleanflex-components-pagelistnested>
+                </li>
+            </ul>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        methods: {
-            beforeSave(data) {
-                delete data.childrenPages
-                return data
-            }
+export default {
+    props: ['model'],
+    methods: {
+        beforeSave(data) {
+            delete data.childrenPages;
+            return data;
         },
-        computed: {
-        	isEditAndEmpty() {
-            if(!$peregrineApp.isAuthorMode()) return false;
+    },
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
             if (this.$helper.areAllEmpty(this.model.rootpage)) return 'Please choose a root page';
             if (this.model.childrenPages && this.model.childrenPages.length == 0) return 'Chosen root page has no children (May need reload after root change)';
             return false;
-          }
-        }
-    }
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/.content.xml
index fb426043b..5365b7cb6 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/.content.xml
@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Pagelistnested" group=".hidden">
-  <jcr:content jcr:primaryType="nt:unstructured"/>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Pagelistnested"
+          group=".hidden">
+    <jcr:content jcr:primaryType="nt:unstructured"/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/template.vue
index 224452868..25df2fd9a 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pagelistnested/template.vue
@@ -1,17 +1,18 @@
 <template>
-  <ul>
-    <li class="children" v-for="(child, i) in model.childrenPages" :key="child.path || i">
-      <a v-bind:href="$helper.pathToUrl(child.path)">{{child.title}}</a>
-      <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
-      v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
-      <themecleanflex-components-pagelistnested v-bind:model="child" v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"></themecleanflex-components-pagelistnested>
-    </li>
-  </ul>
+    <ul>
+        <li class="children" v-for="(child, i) in model.childrenPages" :key="child.path || i">
+            <a v-bind:href="$helper.pathToUrl(child.path)">{{ child.title }}</a>
+            <div v-for="ref in child.references" v-bind:is="ref.htmlElement"
+                 v-bind:class="ref.cssClass" v-html="ref.value" v-bind:key="ref.key"></div>
+            <themecleanflex-components-pagelistnested v-bind:model="child"
+                                                      v-if="child.hasChildren &amp;&amp; child.childrenPages &amp;&amp; child.childrenPages.length &gt; 0"></themecleanflex-components-pagelistnested>
+        </li>
+    </ul>
 </template>
 
 <script>
-    export default {
-        props: ['model', 'references']
-    }
+export default {
+    props: ['model', 'references'],
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/.content.xml
index 1debe994b..5290bfe72 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/.content.xml
@@ -1,11 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Pager - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Pager - Example" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" prevlabel="&lt; Prev" nextlabel="Next >" colorscheme="" toppadding="10" bottompadding="10"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Pager" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Pager - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Pager - Example" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" prevlabel="&lt; Prev" nextlabel="Next >" colorscheme=""
+                         toppadding="10" bottompadding="10"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Pager" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/template.vue
index 9873cf5f5..3aeb2ba3a 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/pager/template.vue
@@ -1,10 +1,10 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full flex justify-between"
-    v-else>
-      <a class="btn" data-per-inline="model.prevlabel" v-bind:href="$helper.pathToUrl(model.previous)"
-      v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full flex justify-between"
+             v-else>
+            <a class="btn" data-per-inline="model.prevlabel" v-bind:href="$helper.pathToUrl(model.previous)"
+               v-bind:class="{
             'btn-lg': model.buttonsize === 'large',
             'btn-sm': model.buttonsize === 'small',
             'btn-primary': model.buttoncolor === 'primary',
@@ -15,9 +15,9 @@
             'btn-light': model.buttoncolor === 'light',
             'btn-dark': model.buttoncolor === 'dark',
             'invisible': model.previous === 'unknown',
-        }">{{model.prevlabel}}</a>
-      <a class="btn" data-per-inline="model.nextlabel"
-      v-bind:href="$helper.pathToUrl(model.next)" v-bind:class="{
+        }">{{ model.prevlabel }}</a>
+            <a class="btn" data-per-inline="model.nextlabel"
+               v-bind:href="$helper.pathToUrl(model.next)" v-bind:class="{
             'btn-lg': model.buttonsize === 'large',
             'btn-sm': model.buttonsize === 'small',
             'btn-primary': model.buttoncolor === 'primary',
@@ -28,20 +28,20 @@
             'btn-light': model.buttoncolor === 'light',
             'btn-dark': model.buttoncolor === 'dark',
             'invisible': model.next === 'unknown',
-        }">{{model.nextlabel}}</a>
-    </div>
-  </themecleanflex-components-block>
+        }">{{ model.nextlabel }}</a>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-        	isEditAndEmpty() {
-                if(!$peregrineApp.isAuthorMode()) return false
-                return this.$helper.areAllEmpty(this.model.prevlabel, this.model.nextlabel)
-            }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.prevlabel, this.model.nextlabel);
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/.content.xml
index a43f730e7..530566cf3 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/.content.xml
@@ -1,20 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Quote - Basic">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Quote - Basic" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p>&lt;p>-&lt;i>Neil Armstrong&lt;/i>&lt;/p>" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Quote" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-    <sample-blockquote jcr:primaryType="nt:unstructured" title="Quote - Block" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;p>If you think you can do a thing or think you cant do a thing, youre right. &lt;/p>&lt;/i>- Henry Ford&lt;/i>" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30"/>
-    </sample-blockquote>
-    <sample-largequote jcr:primaryType="nt:unstructured" title="Quote  - Block Large" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;h2>&lt;em>That's one small step for a man, one giant leap for mankind.&lt;br>&lt;/em>&lt;em>-Neil Armstrong&lt;/em>&lt;/h2>" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30"/>
-    </sample-largequote>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Quote With All RTE Styles" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30"/>
-    </sample-rte>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Quote - Basic">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Quote - Basic" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;p>&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p>&lt;p>-&lt;i>Neil Armstrong&lt;/i>&lt;/p>"
+                         blockquote="false" blockwidth="article" toppadding="30" bottompadding="30"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Quote" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+        <sample-blockquote jcr:primaryType="nt:unstructured" title="Quote - Block" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;p>If you think you can do a thing or think you cant do a thing, youre right. &lt;/p>&lt;/i>- Henry Ford&lt;/i>"
+                         blockquote="true" blockwidth="article" toppadding="30" bottompadding="30"/>
+        </sample-blockquote>
+        <sample-largequote jcr:primaryType="nt:unstructured" title="Quote  - Block Large" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;h2>&lt;em>That's one small step for a man, one giant leap for mankind.&lt;br>&lt;/em>&lt;em>-Neil Armstrong&lt;/em>&lt;/h2>"
+                         blockquote="true" blockwidth="article" toppadding="30" bottompadding="30"/>
+        </sample-largequote>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Quote With All RTE Styles" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                         blockquote="false" blockwidth="article" toppadding="30" bottompadding="30"/>
+        </sample-rte>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/template.vue
index 6c8220bdc..ca1ab1b1f 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/quote/template.vue
@@ -1,24 +1,24 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full p-6" v-html="model.text"
-    v-bind:data-per-inline="`model.text`" v-bind:class="[
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full p-6" v-html="model.text"
+             v-bind:data-per-inline="`model.text`" v-bind:class="[
             {'border-l-8': model.blockquote === 'true'},
             {'border-t-2 border-b-4': model.blockquote === 'false'},
             model.colorscheme === 'dark' ? 'border-gray-200' : 'border-gray-800'
         ]" v-else></div>
-  </themecleanflex-components-block>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-          isEditAndEmpty() {
-              if(!$peregrineApp.isAuthorMode()) return false
-              return this.$helper.areAllEmpty(this.model.text)
-          }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.text);
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/.content.xml
index 99d20b113..665e52054 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/.content.xml
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Reference" group="Chrome">
-  <jcr:content jcr:primaryType="nt:unstructured" reference=""/>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Reference" group="Chrome">
+    <jcr:content jcr:primaryType="nt:unstructured" reference=""/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/template.vue
index aa59ded9f..6c1118ffc 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/reference/template.vue
@@ -1,52 +1,52 @@
 <template>
-  <div v-bind:data-per-path="model.path">
-    <div class="container mx-auto p-5" v-if="isEditAndEmpty">{{isEditAndEmpty}}</div>
-    <div class="relative" v-else>
-      <div class="absolute inset-0 z-10" v-if="maskReference" v-bind:style="overlayStyle"></div>
-      <component v-bind:is="getLoadedComponent(refModel.component)" v-bind:model="refModel"></component>
+    <div v-bind:data-per-path="model.path">
+        <div class="container mx-auto p-5" v-if="isEditAndEmpty">{{ isEditAndEmpty }}</div>
+        <div class="relative" v-else>
+            <div class="absolute inset-0 z-10" v-if="maskReference" v-bind:style="overlayStyle"></div>
+            <component v-bind:is="getLoadedComponent(refModel.component)" v-bind:model="refModel"></component>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-    export default { props: ['model'],
-      computed: {
+export default {
+    props: ['model'],
+    computed: {
         maskReference() {
-            return $peregrineApp.isAuthorMode(); 
+            return $peregrineApp.isAuthorMode();
         },
         refModel() {
-          try {
-            return JSON.parse(this.model.referenceJson)
-          } catch( error) {
-            return { component: 'themecleanflex-components-note'}
-          }
+            try {
+                return JSON.parse(this.model.referenceJson);
+            } catch (error) {
+                return { component: 'themecleanflex-components-note' };
+            }
         },
         reference() {
-          return this.model.reference
+            return this.model.reference;
         },
         overlayStyle() {
-          if(this.reference.endsWith(this.refModel.path)) {
-            return 'background-color: transparent'
-          }
-          else return 'background-color: rgba(230, 230, 230, 0.5)'
+            if (this.reference.endsWith(this.refModel.path)) {
+                return 'background-color: transparent';
+            } else return 'background-color: rgba(230, 230, 230, 0.5)';
         },
         isEditAndEmpty() {
-          if(!$peregrineApp.isAuthorMode()) return false;
-          if (!this.refModel) return 'Referenced component was not found';
-          return false;
-        }
-      },
-      methods: {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            if (!this.refModel) return 'Referenced component was not found';
+            return false;
+        },
+    },
+    methods: {
         beforeSave(data) {
-            delete data.referenceJson; 
+            delete data.referenceJson;
             return data;
         },
         getLoadedComponent(name) {
-          const cmpName = 'cmp' + name.split('-')
-            .map( segment => segment.charAt(0).toUpperCase() + segment.slice(1) )
-            .join('');
-          return window[cmpName];
-        }
-      }
-    }
+            const cmpName = 'cmp' + name.split('-')
+                .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
+                .join('');
+            return window[cmpName];
+        },
+    },
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/.content.xml
index 1f00894f1..2c114eac2 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/.content.xml
@@ -1,17 +1,23 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Rich Text - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Rich Text - Example" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;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.&lt;/p>"/>
-    </sample>
-    <sample-allstyles jcr:primaryType="nt:unstructured" title="Text Block - all styles" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"/>
-    </sample-allstyles>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Rich Text" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-    <sample-media jcr:primaryType="nt:unstructured" title="Rich Text - with media" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p>Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p>"/>
-    </sample-media>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Rich Text - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Rich Text - Example" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;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.&lt;/p>"/>
+        </sample>
+        <sample-allstyles jcr:primaryType="nt:unstructured" title="Text Block - all styles" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"/>
+        </sample-allstyles>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Rich Text" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+        <sample-media jcr:primaryType="nt:unstructured" title="Rich Text - with media" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" showmedia="true" mediatype="image"
+                         imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                         mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                         text="&lt;p>Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p>"/>
+        </sample-media>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/template.vue
index 6a3cc3cb0..32c392b17 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/richtext/template.vue
@@ -1,29 +1,29 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full flex flex-col md:-mx-3"
-    v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full flex flex-col md:-mx-3"
+             v-bind:class="{
             'md:flex-row': model.mediaposition === 'before',
             'md:flex-row-reverse': model.mediaposition === 'after'
         }" v-else>
-      <div class="img-wrapper mb-3 md:mb-0 md:px-3" v-if="model.showmedia === 'true'"
-      v-bind:style="{flex:`0 0 ${model.mediawidth}%`}">
-        <themecleanflex-components-media :model="model"></themecleanflex-components-media>
-      </div>
-      <div class="flex-grow md:px-3" v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
-    </div>
-  </themecleanflex-components-block>
+            <div class="img-wrapper mb-3 md:mb-0 md:px-3" v-if="model.showmedia === 'true'"
+                 v-bind:style="{flex:`0 0 ${model.mediawidth}%`}">
+                <themecleanflex-components-media :model="model"></themecleanflex-components-media>
+            </div>
+            <div class="flex-grow md:px-3" v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-          isEditAndEmpty() {
-              if(!$peregrineApp.isAuthorMode()) return false
-              return this.$helper.areAllEmpty(this.model.text)
-          }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.text);
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/.content.xml
index 7c032b6f1..7c6537bca 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/.content.xml
@@ -1,17 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Text - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Text - Example" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="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." element="p"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Text" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text=""/>
-    </sample-blank>
-    <sample-h1 jcr:primaryType="nt:unstructured" title="Text - Heading 1" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="Themeclean Heading" element="h1"/>
-    </sample-h1>
-    <sample-h2 jcr:primaryType="nt:unstructured" title="Text - Heading 2" group="Text Components">
-      <jcr:content jcr:primaryType="nt:unstructured" text="Themeclean Secondary Heading" element="h2"/>
-    </sample-h2>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Text - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Text - Example" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured"
+                         text="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."
+                         element="p"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Text" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text=""/>
+        </sample-blank>
+        <sample-h1 jcr:primaryType="nt:unstructured" title="Text - Heading 1" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="Themeclean Heading" element="h1"/>
+        </sample-h1>
+        <sample-h2 jcr:primaryType="nt:unstructured" title="Text - Heading 2" group="Text Components">
+            <jcr:content jcr:primaryType="nt:unstructured" text="Themeclean Secondary Heading" element="h2"/>
+        </sample-h2>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/template.vue
index 73b403644..217607c8b 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/simpletext/template.vue
@@ -1,26 +1,27 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <component v-bind:is="model.element"
-    data-per-inline="model.text" v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <component v-bind:is="model.element"
+                   data-per-inline="model.text" v-bind:class="{
             'text-4xl font-semibold': model.element === 'h1',
             'text-3xl font-semibold': model.element === 'h2',
             'text-2xl': model.element === 'h3',
             'text-xl font-semibold': model.element === 'h4',
             'text-lg': model.element === 'h5',
-        }" v-else>{{model.text}}</component>
-  </themecleanflex-components-block>
+        }" v-else>{{ model.text }}
+        </component>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-          isEditAndEmpty() {
-              if(!$peregrineApp.isAuthorMode()) return false
-              return this.$helper.areAllEmpty(this.model.text)
-          }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.text);
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/.content.xml
index 1b3f7ba41..4b82aeb49 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/.content.xml
@@ -1,12 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Social Icons" group=".hidden">
-  <jcr:content jcr:primaryType="nt:unstructured">
-    <icons jcr:primaryType="nt:unstructured">
-      <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook"/>
-      <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter"/>
-      <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram"/>
-      <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest"/>
-      <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube"/>
-    </icons>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Social Icons"
+          group=".hidden">
+    <jcr:content jcr:primaryType="nt:unstructured">
+        <icons jcr:primaryType="nt:unstructured">
+            <icons0 jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                    iconalttext="Facebook"/>
+            <icons1 jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter"/>
+            <icons2 jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                    iconalttext="Instagram"/>
+            <icons3 jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                    iconalttext="Pinterest"/>
+            <icons4 jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                    iconalttext="Youtube"/>
+        </icons>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/template.vue
index 5e1007112..f88433a51 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/socialicons/template.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="flex justify-center -m-1">
-    <a class="m-1" v-for="(item, i) in model.icons" :key="item.path || i"
-    v-bind:href="$helper.pathToUrl(item.url)" v-bind:title="item.iconalttext"
-    v-bind:style="`color:${model.iconcustomcolor === 'true' ? model.iconcolor : false};`">
-      <svg class="fill-current" viewBox="0 0 24 24" v-bind:style="`width:${model.iconsize}px;`">
-        <use v-bind="{'xlink:href':`#${item.icon}`}" v-bind:href="`#${item.icon}`"
-        />
-      </svg>
-    </a>
-  </div>
+    <div class="flex justify-center -m-1">
+        <a class="m-1" v-for="(item, i) in model.icons" :key="item.path || i"
+           v-bind:href="$helper.pathToUrl(item.url)" v-bind:title="item.iconalttext"
+           v-bind:style="`color:${model.iconcustomcolor === 'true' ? model.iconcolor : false};`">
+            <svg class="fill-current" viewBox="0 0 24 24" v-bind:style="`width:${model.iconsize}px;`">
+                <use v-bind="{'xlink:href':`#${item.icon}`}" v-bind:href="`#${item.icon}`"
+                />
+            </svg>
+        </a>
+    </div>
 </template>
 
 <script>
-    export default {
-        props: ['model']
-    }
+export default {
+    props: ['model'],
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/.content.xml
index 702069e53..402e95256 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/.content.xml
@@ -1,14 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Spacer">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Spacer" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured" height="20"/>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Spacer (Empty)" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" height="20"/>
-    </sample-blank>
-    <sample-image jcr:primaryType="nt:unstructured" title="Spacer - Image" group="Chrome">
-      <jcr:content jcr:primaryType="nt:unstructured" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"/>
-    </sample-image>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Spacer">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Spacer" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured" height="20"/>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Spacer (Empty)" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" height="20"/>
+        </sample-blank>
+        <sample-image jcr:primaryType="nt:unstructured" title="Spacer - Image" group="Chrome">
+            <jcr:content jcr:primaryType="nt:unstructured" height="80" custombackground="true" backgroundtype="image"
+                         bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"/>
+        </sample-image>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/template.vue
index 5e53c56b0..be80d6615 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/spacer/template.vue
@@ -1,21 +1,21 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div v-else>
-      <div v-bind:style="`height:${model.height}vh;`"></div>
-    </div>
-  </themecleanflex-components-block>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div v-else>
+            <div v-bind:style="`height:${model.height}vh;`"></div>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-        	isEditAndEmpty() {
-                if(!$peregrineApp.isAuthorMode()) return false
-                return this.$helper.areAllEmpty(this.model.height > 0)
-            }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.height > 0);
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/.content.xml
index fa2836428..df57e27ec 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/.content.xml
@@ -1,37 +1,68 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Tabs - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Tabs - Example" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200">
-        <tabs jcr:primaryType="nt:unstructured">
-          <tabs0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Learn More"/>
-          <tabs1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="Contact Us"/>
-          <tabs2 jcr:primaryType="nt:unstructured" text="&lt;p>Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="About Us"/>
-        </tabs>
-      </jcr:content>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Tabs" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured">
-        <tabs jcr:primaryType="nt:unstructured"/>
-      </jcr:content>
-    </sample-blank>
-    <sample-media jcr:primaryType="nt:unstructured" title="Tabs - Media" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination">
-        <tabs jcr:primaryType="nt:unstructured">
-          <tabs0 jcr:primaryType="nt:unstructured" text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>" title="Learn More"/>
-          <tabs1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="Contact Us"/>
-          <tabs2 jcr:primaryType="nt:unstructured" text="&lt;p>Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="About Us"/>
-        </tabs>
-      </jcr:content>
-    </sample-media>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Tabs With All RTE Styles" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200">
-        <tabs jcr:primaryType="nt:unstructured">
-          <tabs0 jcr:primaryType="nt:unstructured" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" title="Learn More"/>
-          <tabs1 jcr:primaryType="nt:unstructured" text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="Contact Us"/>
-          <tabs2 jcr:primaryType="nt:unstructured" text="&lt;p>Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>" title="About Us"/>
-        </tabs>
-      </jcr:content>
-    </sample-rte>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Tabs - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Tabs - Example" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false"
+                         backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false"
+                         mediatype="image"
+                         imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                         mediaposition="before" mediawidth="33" mediaiconsize="200">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <tabs0 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                           title="Learn More"/>
+                    <tabs1 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                           title="Contact Us"/>
+                    <tabs2 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                           title="About Us"/>
+                </tabs>
+            </jcr:content>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Tabs" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured">
+                <tabs jcr:primaryType="nt:unstructured"/>
+            </jcr:content>
+        </sample-blank>
+        <sample-media jcr:primaryType="nt:unstructured" title="Tabs - Media" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false"
+                         backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true"
+                         mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                         imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                         mediatitle="Tropical sailing destination">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <tabs0 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p>"
+                           title="Learn More"/>
+                    <tabs1 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                           title="Contact Us"/>
+                    <tabs2 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                           title="About Us"/>
+                </tabs>
+            </jcr:content>
+        </sample-media>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Tabs With All RTE Styles" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false"
+                         backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false"
+                         mediatype="image"
+                         imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                         mediaposition="before" mediawidth="33" mediaiconsize="200">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <tabs0 jcr:primaryType="nt:unstructured"
+                           text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                           title="Learn More"/>
+                    <tabs1 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                           title="Contact Us"/>
+                    <tabs2 jcr:primaryType="nt:unstructured"
+                           text="&lt;p>Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p>"
+                           title="About Us"/>
+                </tabs>
+            </jcr:content>
+        </sample-rte>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/template.vue
index 6d7dda6fe..45add89d5 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tabs/template.vue
@@ -1,27 +1,27 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full" v-else>
-      <div>
-        <h1 class="text-center pb-4" v-if="model.showtitle == 'true' &amp;&amp; model.title"
-        data-per-inline="model.title">{{model.title}}</h1>
-        <h2 class="text-center pb-4" v-if="model.showsubtitle == 'true' &amp;&amp; model.subtitle"
-        data-per-inline="model.subtitle">{{model.subtitle}}</h2>
-      </div>
-      <div class="flex flex-col -mx-3" v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full" v-else>
+            <div>
+                <h1 class="text-center pb-4" v-if="model.showtitle == 'true' &amp;&amp; model.title"
+                    data-per-inline="model.title">{{ model.title }}</h1>
+                <h2 class="text-center pb-4" v-if="model.showsubtitle == 'true' &amp;&amp; model.subtitle"
+                    data-per-inline="model.subtitle">{{ model.subtitle }}</h2>
+            </div>
+            <div class="flex flex-col -mx-3" v-bind:class="{
             'lg:flex-row': model.mediaposition === 'before',
             'lg:flex-row-reverse': model.mediaposition === 'after'
 
         }">
-        <div class="img-wrapper mx-3" v-if="model.showmedia == 'true'"
-        v-bind:style="{'flex':`0 0 ${model.mediawidth}%`}">
-          <themecleanflex-components-media :model="model"></themecleanflex-components-media>
-        </div>
-        <div class="py-3 flex flex-col mx-3 lg:flex-grow">
-          <!-- Tab Nav -->
-          <div class="flex flex-wrap justify-center  pb-3" role="tablist">
-            <a class="mx-2 no-underline p-3 cursor-pointer" role="tab" v-for="(item, i) in model.tabs"
-            :key="item.path || i" v-bind:class="{
+                <div class="img-wrapper mx-3" v-if="model.showmedia == 'true'"
+                     v-bind:style="{'flex':`0 0 ${model.mediawidth}%`}">
+                    <themecleanflex-components-media :model="model"></themecleanflex-components-media>
+                </div>
+                <div class="py-3 flex flex-col mx-3 lg:flex-grow">
+                    <!-- Tab Nav -->
+                    <div class="flex flex-wrap justify-center  pb-3" role="tablist">
+                        <a class="mx-2 no-underline p-3 cursor-pointer" role="tab" v-for="(item, i) in model.tabs"
+                           :key="item.path || i" v-bind:class="{
             'text-white' : active === i,
             'bg-blue-700' : active === i &amp;&amp; model.tabcolor === 'blue',
             'bg-green-700' : active === i &amp;&amp; model.tabcolor === 'green',
@@ -36,40 +36,43 @@
             'text-light' : active !== i &amp;&amp; model.tabcolor === 'light' || active === i &amp;&amp; model.tabcolor === 'dark',
             'text-dark' : active !== i &amp;&amp; model.tabcolor === 'dark' || active === i &amp;&amp; model.tabcolor === 'light',
         }" v-bind:id="`tab-control-${_uid}${parseInt(i)+1}`" v-bind:aria-controls="`tab${_uid}${parseInt(i)+1}`"
-            v-bind:aria-selected="active === i" v-on:click="toggleActive(i)" data-per-inline="item.title">{{item.title}}</a>
-          </div>
-          <!-- Tab Content -->
-          <div class="relative">
-            <div class="w-full py-3 opacity-0 transition-opacity" role="tabpanel"
-            v-for="(item, i) in model.tabs" :key="item.path || i" v-bind:id="`tab${_uid}${parseInt(i)+1}`"
-            v-bind:aria-labelledby="`tab-control-${_uid}${parseInt(i)+1}`" v-bind:class="active === i ? 'block opacity-100' : 'hidden'"
-            v-html="item.text" v-bind:data-per-inline="`item.text`"></div>
-          </div>
+                           v-bind:aria-selected="active === i" v-on:click="toggleActive(i)"
+                           data-per-inline="item.title">{{ item.title }}</a>
+                    </div>
+                    <!-- Tab Content -->
+                    <div class="relative">
+                        <div class="w-full py-3 opacity-0 transition-opacity" role="tabpanel"
+                             v-for="(item, i) in model.tabs" :key="item.path || i"
+                             v-bind:id="`tab${_uid}${parseInt(i)+1}`"
+                             v-bind:aria-labelledby="`tab-control-${_uid}${parseInt(i)+1}`"
+                             v-bind:class="active === i ? 'block opacity-100' : 'hidden'"
+                             v-html="item.text" v-bind:data-per-inline="`item.text`"></div>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </themecleanflex-components-block>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-      props: ['model'],
-      data: function(){
-        return { 
-          active: 0
-        }
-      },
-      computed: {
+export default {
+    props: ['model'],
+    data: function() {
+        return {
+            active: 0,
+        };
+    },
+    computed: {
         isEditAndEmpty() {
-              if(!$peregrineApp.isAuthorMode()) return false
-              //return !(this.model.tabs.length > 0)
-              return this.$helper.areAllEmpty(this.model.showtitle === 'true' && this.model.title, this.model.showsubtitle === 'true' && this.model.subtitle , this.model.tabs , this.model.showmedia === 'true')
-        }
-      },
-      methods: {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            //return !(this.model.tabs.length > 0)
+            return this.$helper.areAllEmpty(this.model.showtitle === 'true' && this.model.title, this.model.showsubtitle === 'true' && this.model.subtitle, this.model.tabs, this.model.showmedia === 'true');
+        },
+    },
+    methods: {
         toggleActive: function(i) {
-          this.active = i;
-        }
-      }
-    }
+            this.active = i;
+        },
+    },
+};
 </script>
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/.content.xml
index 3af33654e..b724befbc 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/.content.xml
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Tags" group="Chrome">
-  <jcr:content jcr:primaryType="nt:unstructured" tagcolor="green" toppadding="30" bottompadding="30"/>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Tags" group="Chrome">
+    <jcr:content jcr:primaryType="nt:unstructured" tagcolor="green" toppadding="30" bottompadding="30"/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/template.vue
index 352a16dd2..42133c741 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/tags/template.vue
@@ -1,35 +1,38 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">There are no tags set for this page</div>
-    <div class="w-full flex flex-wrap items-center -mx-2"
-    v-else>
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">There are no tags set for this page</div>
+        <div class="w-full flex flex-wrap items-center -mx-2"
+             v-else>
       <span class="font-bold ml-2 mr-4 mb-1" data-per-inline="model.tagslabel"
-      v-if="model.tagslabel">{{model.tagslabel}}</span>
-      <component class="text-white hover:text-white px-4 py-1 mx-2 rounded-full shadow-md no-underline mb-1"
-      v-for="(item, i) in tags" :key="item.path || i" v-bind:class="{
+            v-if="model.tagslabel">{{ model.tagslabel }}</span>
+            <component class="text-white hover:text-white px-4 py-1 mx-2 rounded-full shadow-md no-underline mb-1"
+                       v-for="(item, i) in tags" :key="item.path || i" v-bind:class="{
             'bg-blue-600': model.tagcolor === &quot;blue&quot;,
             'bg-green-600': model.tagcolor === &quot;green&quot;,
             'bg-orange-600': model.tagcolor === &quot;orange&quot;,
             'bg-red-600': model.tagcolor === &quot;red&quot;,
             'bg-yellow-600': model.tagcolor === &quot;yellow&quot;
         }" v-bind:href="model.pagelink ? model.pagelink + '.html' + item.value : false"
-      v-bind:is="model.pagelink ? &quot;a&quot;:&quot;div&quot;">{{item.value ? item.value : item.name}}</component>
-    </div>
-  </themecleanflex-components-block>
+                       v-bind:is="model.pagelink ? &quot;a&quot;:&quot;div&quot;">{{
+                    item.value ? item.value : item.name
+                                                                                  }}
+            </component>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-      props: ['model'],
-      computed: {
+export default {
+    props: ['model'],
+    computed: {
         tags() {
-          return $peregrineApp.getView().page.tags
+            return $peregrineApp.getView().page.tags;
         },
         isEditAndEmpty() {
-              if(!$peregrineApp.isAuthorMode()) return false
-              return this.tags.length === 0
-        }
-      }
-    }
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.tags.length === 0;
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/.content.xml
index 5c467dc64..265a3e370 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/.content.xml
@@ -1,24 +1,40 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Teaser Horizontal - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Teaser Horizontal - Example" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass=""/>
-          <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass=""/>
-        </buttons>
-      </jcr:content>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Teaser Horizontal" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Teaser Horizontal With All RTE Styles" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass=""/>
-          <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass=""/>
-        </buttons>
-      </jcr:content>
-    </sample-rte>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component"
+          jcr:title="Teaser Horizontal - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Teaser Horizontal - Example" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" aligncontent="left" showtitle="true" showsubtitle="true"
+                         showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color"
+                         bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30"
+                         text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>"
+                         isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                         buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="See More" buttoncolor="primary" iconclass=""/>
+                    <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="About Us" buttoncolor="primary" iconclass=""/>
+                </buttons>
+            </jcr:content>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Teaser Horizontal" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Teaser Horizontal With All RTE Styles" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" aligncontent="left" showtitle="true" showsubtitle="true"
+                         showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color"
+                         bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30"
+                         text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                         isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                         buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="See More" buttoncolor="primary" iconclass=""/>
+                    <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="About Us" buttoncolor="primary" iconclass=""/>
+                </buttons>
+            </jcr:content>
+        </sample-rte>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/template.vue
index b86851641..90e780a55 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaserhorizontal/template.vue
@@ -1,39 +1,39 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full flex flex-col justify-between items-center"
-    v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full flex flex-col justify-between items-center"
+             v-bind:class="{
             'md:flex-row-reverse': model.buttonside === 'left',
             'md:flex-row': model.buttonside === 'right',
             'enlarge-text': model.isprimary === 'true'
         }" v-else>
-      <div class v-bind:class="{
+            <div class v-bind:class="{
             'text-left': model.aligncontent === 'left',
             'text-center': model.aligncontent === 'center',
             'text-right': model.aligncontent === 'right'
         }" v-bind:style="`flex-basis:${model.textwidth}%;`">
-        <h1 class="text-5xl mt-0" v-if="model.showtitle === 'true'"
-        v-bind:class="{
+                <h1 class="text-5xl mt-0" v-if="model.showtitle === 'true'"
+                    v-bind:class="{
             'mb-6': model.isprimary === 'true',
             'mb-3': model.isprimary !== 'true'
-        }" data-per-inline="model.title">{{model.title}}</h1>
-        <p class="teaser-subtitle text-3xl font-normal" v-if="model.showsubtitle === 'true'"
-        v-bind:class="{
+        }" data-per-inline="model.title">{{ model.title }}</h1>
+                <p class="teaser-subtitle text-3xl font-normal" v-if="model.showsubtitle === 'true'"
+                   v-bind:class="{
             'mb-6': model.isprimary === 'true' &amp;&amp; model.showtitle === 'false',
             'my-6': model.isprimary === 'true' &amp;&amp; model.showtitle === 'true',
             'mb-3': model.isprimary !== 'true' &amp;&amp; model.showtitle === 'false',
             'my-3': model.isprimary !== 'true' &amp;&amp; model.showtitle === 'true'
-        }" data-per-inline="model.subtitle">{{model.subtitle}}</p>
-        <div class="teaser-text" v-if="model.showtext === 'true'"
-        v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
-      </div>
-      <div class="teaser-actions flex flex-wrap justify-center" v-if="model.showbutton === 'true'"
-      v-bind:class="{
+        }" data-per-inline="model.subtitle">{{ model.subtitle }}</p>
+                <div class="teaser-text" v-if="model.showtext === 'true'"
+                     v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
+            </div>
+            <div class="teaser-actions flex flex-wrap justify-center" v-if="model.showbutton === 'true'"
+                 v-bind:class="{
             'md:justify-end': model.buttonside === 'right',
             'md:justify-start': model.buttonside === 'left',
         }">
-        <a class="btn m-2" v-for="(item, i) in model.buttons" :key="item.path || i"
-        v-bind:href="$helper.pathToUrl(item.buttonlink)" v-bind:class="{
+                <a class="btn m-2" v-for="(item, i) in model.buttons" :key="item.path || i"
+                   v-bind:href="$helper.pathToUrl(item.buttonlink)" v-bind:class="{
             'btn-lg': model.buttonsize === 'large',
             'btn-sm': model.buttonsize === 'small',
             'btn-primary': item.buttoncolor === 'primary',
@@ -43,21 +43,24 @@
             'btn-warning': item.buttoncolor === 'warning',
             'btn-light': item.buttoncolor === 'light',
             'btn-dark': item.buttoncolor === 'dark'
-        }" v-bind:data-per-inline="`model.buttons.${i}.buttontext`" v-bind:style="`backgroundColor:${item.buttoncolor};borderColor:${item.buttoncolor};`">{{item.buttontext}}</a>
-      </div>
-    </div>
-  </themecleanflex-components-block>
+        }" v-bind:data-per-inline="`model.buttons.${i}.buttontext`"
+                   v-bind:style="`backgroundColor:${item.buttoncolor};borderColor:${item.buttoncolor};`">{{
+                        item.buttontext
+                                                                                                         }}</a>
+            </div>
+        </div>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-        	isEditAndEmpty() {
-                if(!$peregrineApp.isAuthorMode()) return false
-                return this.$helper.areAllEmpty(this.model.showtitle === 'true', this.model.showsubtitle === 'true', this.model.showtext === 'true', this.model.showbutton === 'true')
-            }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.showtitle === 'true', this.model.showsubtitle === 'true', this.model.showtext === 'true', this.model.showbutton === 'true');
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/.content.xml
index 1d66298d0..f7bc49089 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/.content.xml
@@ -1,40 +1,71 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Teaser Vertical - Example">
-  <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
-    <sample jcr:primaryType="nt:unstructured" title="Teaser Vertical - Example" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass=""/>
-          <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass=""/>
-        </buttons>
-      </jcr:content>
-    </sample>
-    <sample-blank jcr:primaryType="nt:unstructured" title="Teaser Vertical" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured"/>
-    </sample-blank>
-    <sample-mediateaser jcr:primaryType="nt:unstructured" title="Teaser Vertical - Media" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after">
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass=""/>
-          <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass=""/>
-        </buttons>
-      </jcr:content>
-    </sample-mediateaser>
-    <sample-rte jcr:primaryType="nt:unstructured" title="Teaser Vertical With All RTE Styles" group=".hidden">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass=""/>
-          <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass=""/>
-        </buttons>
-      </jcr:content>
-    </sample-rte>
-    <sample-teaserfull jcr:primaryType="nt:unstructured" title="Teaser Vertical - Full Height" group="Features">
-      <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks">
-        <buttons jcr:primaryType="nt:unstructured">
-          <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass=""/>
-          <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass=""/>
-        </buttons>
-      </jcr:content>
-    </sample-teaserfull>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component"
+          jcr:title="Teaser Vertical - Example">
+    <jcr:content jcr:primaryType="nt:unstructured" __variations="true">
+        <sample jcr:primaryType="nt:unstructured" title="Teaser Vertical - Example" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showtext="true"
+                         showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff"
+                         gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30"
+                         text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>"
+                         subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="See More" buttoncolor="primary" iconclass=""/>
+                    <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="About Us" buttoncolor="primary" iconclass=""/>
+                </buttons>
+            </jcr:content>
+        </sample>
+        <sample-blank jcr:primaryType="nt:unstructured" title="Teaser Vertical" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured"/>
+        </sample-blank>
+        <sample-mediateaser jcr:primaryType="nt:unstructured" title="Teaser Vertical - Media" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showtext="true"
+                         showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff"
+                         gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30"
+                         text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>"
+                         subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                         showmedia="true" mediatype="image"
+                         imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                         mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="See More" buttoncolor="primary" iconclass=""/>
+                    <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="About Us" buttoncolor="primary" iconclass=""/>
+                </buttons>
+            </jcr:content>
+        </sample-mediateaser>
+        <sample-rte jcr:primaryType="nt:unstructured" title="Teaser Vertical With All RTE Styles" group=".hidden">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showtext="true"
+                         showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff"
+                         gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30"
+                         text="&lt;h1>Left (Default) Alignment Test&lt;/h1>&lt;h2>Header h2&lt;/h2>&lt;h3>Header h3&lt;/h3>&lt;h4>Header h4&lt;/h4>&lt;p>Text:&lt;/p>&lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p>unordered list:&lt;/p>&lt;ul>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ul>&lt;p>ordered list&lt;/p>&lt;ol>&lt;li>item 1&lt;/li>&lt;li>item 2&lt;/li>&lt;li>item 3&lt;/li>&lt;/ol>&lt;p>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p>another line&lt;/p>&lt;h1 style=&quot;text-align: center; &quot;>Center Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: center; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: center; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: center; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: center; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: center; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: center; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: center; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: center; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: center; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: center; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: center; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: center; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: right; &quot;>Right Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: right; &quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: right; &quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: right; &quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: right; &quot;>Text:&lt;/p>&lt;p style=&quot;text-align: right; &quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: right; &quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: right; &quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: right; &quot;>item 1&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 2&lt;/li>&lt;li style=&quot;text-align: right; &quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: right; &quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: right; &quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: right; &quot;>another line&lt;/p>&lt;h1 style=&quot;text-align: justify;&quot;>Justified Alignment Test&lt;/h1>&lt;h2 style=&quot;text-align: justify;&quot;>Header h2&lt;/h2>&lt;h3 style=&quot;text-align: justify;&quot;>Header h3&lt;/h3>&lt;h4 style=&quot;text-align: justify;&quot;>Header h4&lt;/h4>&lt;p style=&quot;text-align: justify;&quot;>Text:&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>unordered list:&lt;/p>&lt;ul>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ul>&lt;p style=&quot;text-align: justify;&quot;>ordered list&lt;/p>&lt;ol>&lt;li style=&quot;text-align: justify;&quot;>item 1&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 2&lt;/li>&lt;li style=&quot;text-align: justify;&quot;>item 3&lt;/li>&lt;/ol>&lt;p style=&quot;text-align: justify;&quot;>sub&lt;sub>script&lt;/sub> super&lt;sup>script&lt;/sup>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;strong>bold&lt;/strong> &lt;em>italic&lt;/em>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;>some link text&lt;/a>&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br>a line followed by a return (end of paragraph)&lt;/p>&lt;p style=&quot;text-align: justify;&quot;>another line&lt;/p>"
+                         subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="See More" buttoncolor="primary" iconclass=""/>
+                    <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="About Us" buttoncolor="primary" iconclass=""/>
+                </buttons>
+            </jcr:content>
+        </sample-rte>
+        <sample-teaserfull jcr:primaryType="nt:unstructured" title="Teaser Vertical - Full Height" group="Features">
+            <jcr:content jcr:primaryType="nt:unstructured" showtitle="true" showsubtitle="true" showbutton="true"
+                         isprimary="true" fullheight="true" custombackground="true" backgroundtype="image"
+                         bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                         overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                         text="&lt;p>Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p>"
+                         subtitle="Molestiae alias et inventore voluptas" buttonsize="large"
+                         title="Themeclean Flex Blocks">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <buttons0 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="See More" buttoncolor="primary" iconclass=""/>
+                    <buttons1 jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                              buttontext="About Us" buttoncolor="primary" iconclass=""/>
+                </buttons>
+            </jcr:content>
+        </sample-teaserfull>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/template.vue
index 0d0b4cb9a..83e3b096f 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/teaservertical/template.vue
@@ -1,18 +1,18 @@
 <template>
-  <themecleanflex-components-block v-bind:model="model">
-    <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
-    <div class="w-full flex flex-col items-center md:-mx-3"
-    v-bind:class="{
+    <themecleanflex-components-block v-bind:model="model">
+        <div class="p-5" v-if="isEditAndEmpty">no content defined for component</div>
+        <div class="w-full flex flex-col items-center md:-mx-3"
+             v-bind:class="{
             'md:flex-row': model.mediaposition === 'before',
             'md:flex-row-reverse': model.mediaposition === 'after',
             'enlarge-text': model.isprimary === 'true'
         }" v-else>
-      <div class="img-wrapper mb-3 md:mb-0 md:px-3 media-sizeable" v-if="model.showmedia === 'true'"
-      v-bind:style="{flex:`0 0 ${model.mediawidth}%`}">
-        <themecleanflex-components-media :model="model"></themecleanflex-components-media>
-      </div>
-      <div class="flex flex-col flex-grow mb-3 md:px-3">
-        <div class v-bind:class="{
+            <div class="img-wrapper mb-3 md:mb-0 md:px-3 media-sizeable" v-if="model.showmedia === 'true'"
+                 v-bind:style="{flex:`0 0 ${model.mediawidth}%`}">
+                <themecleanflex-components-media :model="model"></themecleanflex-components-media>
+            </div>
+            <div class="flex flex-col flex-grow mb-3 md:px-3">
+                <div class v-bind:class="{
             'text-left': model.aligncontent === 'left',
             'text-center': model.aligncontent === 'center',
             'text-right': model.aligncontent === 'right',
@@ -20,29 +20,29 @@
             'self-center': model.aligncontent === 'center',
             'self-end': model.aligncontent === 'right'
         }" v-bind:style="`width:${model.textwidth}%;`">
-          <h1 class="text-5xl mt-0" v-if="model.showtitle === 'true'"
-          v-bind:class="{
+                    <h1 class="text-5xl mt-0" v-if="model.showtitle === 'true'"
+                        v-bind:class="{
             'mb-6': model.isprimary === 'true',
             'mb-3': model.isprimary !== 'true'
-        }" data-per-inline="model.title">{{model.title}}</h1>
-          <p class="teaser-subtitle text-3xl font-normal" v-if="model.showsubtitle === 'true'"
-          v-bind:class="{
+        }" data-per-inline="model.title">{{ model.title }}</h1>
+                    <p class="teaser-subtitle text-3xl font-normal" v-if="model.showsubtitle === 'true'"
+                       v-bind:class="{
             'mb-6': model.isprimary === 'true' &amp;&amp; model.showtitle === 'false',
             'my-6': model.isprimary === 'true' &amp;&amp; model.showtitle === 'true',
             'mb-3': model.isprimary !== 'true' &amp;&amp; model.showtitle === 'false',
             'my-3': model.isprimary !== 'true' &amp;&amp; model.showtitle === 'true'
-        }" data-per-inline="model.subtitle">{{model.subtitle}}</p>
-          <div class="teaser-text" v-if="model.showtext === 'true'"
-          v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
-        </div>
-        <div class="teaser-actions flex flex-wrap p-0 -mx-2" v-if="model.showbutton == 'true'"
-        v-bind:class="{
+        }" data-per-inline="model.subtitle">{{ model.subtitle }}</p>
+                    <div class="teaser-text" v-if="model.showtext === 'true'"
+                         v-html="model.text" v-bind:data-per-inline="`model.text`"></div>
+                </div>
+                <div class="teaser-actions flex flex-wrap p-0 -mx-2" v-if="model.showbutton == 'true'"
+                     v-bind:class="{
             'justify-start': model.alignbuttons === 'start',
             'justify-center': model.alignbuttons === 'center',
             'justify-end': model.alignbuttons === 'end'
         }">
-          <a class="btn m-2" v-for="(item, i) in model.buttons" :key="item.path || i"
-          v-bind:href="$helper.pathToUrl(item.buttonlink)" v-bind:class="{
+                    <a class="btn m-2" v-for="(item, i) in model.buttons" :key="item.path || i"
+                       v-bind:href="$helper.pathToUrl(item.buttonlink)" v-bind:class="{
             'btn-lg': model.buttonsize === 'large',
             'btn-sm': model.buttonsize === 'small',
             'btn-primary': item.buttoncolor === 'primary',
@@ -52,22 +52,25 @@
             'btn-warning': item.buttoncolor === 'warning',
             'btn-light': item.buttoncolor === 'light',
             'btn-dark': item.buttoncolor === 'dark'
-        }" v-bind:data-per-inline="`model.buttons.${i}.buttontext`" v-bind:style="`backgroundColor:${item.buttoncolor};borderColor:${item.buttoncolor};`">{{item.buttontext}}</a>
+        }" v-bind:data-per-inline="`model.buttons.${i}.buttontext`"
+                       v-bind:style="`backgroundColor:${item.buttoncolor};borderColor:${item.buttoncolor};`">{{
+                            item.buttontext
+                                                                                                             }}</a>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </themecleanflex-components-block>
+    </themecleanflex-components-block>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-        	isEditAndEmpty() {
-                if(!$peregrineApp.isAuthorMode()) return false
-                return this.$helper.areAllEmpty(this.model.showtitle === 'true', this.model.showsubtitle === 'true', this.model.showtext === 'true', this.model.showbutton === 'true')
-            }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        isEditAndEmpty() {
+            if (!$peregrineApp.isAuthorMode()) return false;
+            return this.$helper.areAllEmpty(this.model.showtitle === 'true', this.model.showsubtitle === 'true', this.model.showtext === 'true', this.model.showbutton === 'true');
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/.content.xml
index 58827d6a8..3e256976c 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/.content.xml
@@ -1,10 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Text Links" group=".hidden">
-  <jcr:content jcr:primaryType="nt:unstructured">
-    <links jcr:primaryType="nt:unstructured">
-      <links0 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark"/>
-      <links1 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark"/>
-      <links2 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark"/>
-    </links>
-  </jcr:content>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Text Links"
+          group=".hidden">
+    <jcr:content jcr:primaryType="nt:unstructured">
+        <links jcr:primaryType="nt:unstructured">
+            <links0 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                    color="dark"/>
+            <links1 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                    color="dark"/>
+            <links2 jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                    color="dark"/>
+        </links>
+    </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/template.vue
index e3f55743e..d6d346240 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/template.vue
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/textlinks/template.vue
@@ -1,8 +1,8 @@
 <template>
-  <ul class="list-none flex flex-col items-center md:flex-row p-0">
-    <li class="m-2" v-for="(item, i) in model.links" :key="item.path || i">
-      <a class="no-underline p-3 hover:underline" v-bind:href="$helper.pathToUrl(item.link)"
-      v-bind:data-per-inline="`model.links.${i}.text`" v-bind:class="{
+    <ul class="list-none flex flex-col items-center md:flex-row p-0">
+        <li class="m-2" v-for="(item, i) in model.links" :key="item.path || i">
+            <a class="no-underline p-3 hover:underline" v-bind:href="$helper.pathToUrl(item.link)"
+               v-bind:data-per-inline="`model.links.${i}.text`" v-bind:class="{
             'text-blue-700': model.linkcolor === 'primary',
             'text-green-700 hover:text-green-600': model.linkcolor === 'success',
             'text-red-700 hover:text-red-600': model.linkcolor === 'danger',
@@ -10,19 +10,19 @@
             'text-white hover:text-white': model.linkcolor === 'light',
             'text-gray-800 hover:text-black': model.linkcolor === 'dark',
             'font-bold' : $data.path === $helper.pathToUrl(item.link)
-        }">{{item.text}}</a>
-    </li>
-  </ul>
+        }">{{ item.text }}</a>
+        </li>
+    </ul>
 </template>
 
 <script>
-    export default {
-        props: ['model'],
-        computed: {
-          activeClass (url) {
-            return {'font-bold': this.$data.path === url}
-          }
-        }
-    }
+export default {
+    props: ['model'],
+    computed: {
+        activeClass(url) {
+            return { 'font-bold': this.$data.path === url };
+        },
+    },
+};
 </script>
 
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/install/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/install/.content.xml
index f39a790f6..0f5a53186 100644
--- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/install/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/install/.content.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root
-  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="sling:Folder"
-  jcr:title="Install Folder"
+    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"
+    jcr:title="Install Folder"
 />
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/.content.xml
index 9f9ea4929..bbffec4ae 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/.content.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="per:Site"
-  jcr:title="ThemecleanFlex Site"
-  sourceSite="pagerendervue"
-  internal="false"
-  template="true"/>
\ No newline at end of file
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="per:Site"
+    jcr:title="ThemecleanFlex Site"
+    sourceSite="pagerendervue"
+    internal="false"
+    template="true"/>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/.content.xml
index 18ed23b58..456b8ef0b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/.content.xml
@@ -1,16 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root
-  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="per:Page"
-  jcr:title="themecleanflex root asset"
-  jcr:description="themecleanflex Assets Root">
-
-  <jcr:content
-    jcr:primaryType="per:PageContent"
-    sling:resourceType="themecleanflex/components/page"
+    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="per:Page"
     jcr:title="themecleanflex root asset"
-    brand="themecleanflex"
-    template="/content/themecleanflex/templates"/>
+    jcr:description="themecleanflex Assets Root">
+
+    <jcr:content
+        jcr:primaryType="per:PageContent"
+        sling:resourceType="themecleanflex/components/page"
+        jcr:title="themecleanflex root asset"
+        brand="themecleanflex"
+        template="/content/themecleanflex/templates"/>
 
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/.content.xml
index 36892d2e5..208a1ee5a 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/.content.xml
@@ -1,22 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="sling:OrderedFolder"
-  jcr:title="icons"
-  jcr:description="icons">
-  <facebook.svg/>
-  <google.svg/>
-  <instagram.svg/>
-  <launcher-icon-1x.png/>
-  <launcher-icon-2x.png/>
-  <launcher-icon-4x.png/>
-  <linkedin.svg/>
-  <pinterest.svg/>
-  <telegram.svg/>
-  <tumblr.svg/>
-  <twitch.svg/>
-  <twitter.svg/>
-  <yammer.svg/>
-  <yelp.svg/>
-  <youtube.svg/>
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:OrderedFolder"
+    jcr:title="icons"
+    jcr:description="icons">
+    <facebook.svg/>
+    <google.svg/>
+    <instagram.svg/>
+    <launcher-icon-1x.png/>
+    <launcher-icon-2x.png/>
+    <launcher-icon-4x.png/>
+    <linkedin.svg/>
+    <pinterest.svg/>
+    <telegram.svg/>
+    <tumblr.svg/>
+    <twitch.svg/>
+    <twitter.svg/>
+    <yammer.svg/>
+    <yelp.svg/>
+    <youtube.svg/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/facebook.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/google.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/instagram.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/.content.xml
index 9debbd518..eb1cf6f31 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/png"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-1x.png/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/.content.xml
index 9debbd518..eb1cf6f31 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/png"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-2x.png/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/.content.xml
index 9debbd518..eb1cf6f31 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/png"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/launcher-icon-4x.png/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/linkedin.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/pinterest.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/telegram.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/tumblr.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitch.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/twitter.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yammer.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/yelp.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/icons/youtube.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/.content.xml
index e8b729cb4..eb13d12e0 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/.content.xml
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:lastModified="{Date}2020-07-13T12:43:47.726-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="sling:OrderedFolder"
-    jcr:title="placeholders">
+          jcr:lastModified="{Date}2020-07-13T12:43:47.726-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="sling:OrderedFolder"
+          jcr:title="placeholders">
     <man.jpg/>
     <woman.jpg/>
     <_x0031_x1.png/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/.content.xml
index 380f711f6..463307745 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/.content.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T13:38:31.428-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Asset">
+          jcr:lastModified="{Date}2020-07-13T13:38:31.428-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:lastModified="{Date}2020-07-13T13:38:31.428-07:00"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/per-data/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/per-data/.content.xml
index bdd1f677a..0d5eca63b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/per-data/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/per-data/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    height="{Long}320"
-    width="{Long}640"/>
+          jcr:primaryType="sling:Folder"
+          height="{Long}320"
+          width="{Long}640"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-gama/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-gama/.content.xml
index 16d7f1f24..7c15ba3b8 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-gama/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-gama/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    image_gamma="0.455"/>
+          jcr:primaryType="sling:Folder"
+          image_gamma="0.455"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-ihdr/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-ihdr/.content.xml
index 0bc87cf7b..9c9564b33 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-ihdr/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-ihdr/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    raw_tags="\{&quot;image_width&quot;:&quot;640&quot;,&quot;image_height&quot;:&quot;320&quot;,&quot;bits_per_sample&quot;:&quot;8&quot;,&quot;color_type&quot;:&quot;True Color&quot;,&quot;compression_type&quot;:&quot;Deflate&quot;,&quot;filter_method&quot;:&quot;Adaptive&quot;,&quot;interlace_method&quot;:&quot;No Interlace&quot;}"/>
+          jcr:primaryType="sling:Folder"
+          raw_tags="\{&quot;image_width&quot;:&quot;640&quot;,&quot;image_height&quot;:&quot;320&quot;,&quot;bits_per_sample&quot;:&quot;8&quot;,&quot;color_type&quot;:&quot;True Color&quot;,&quot;compression_type&quot;:&quot;Deflate&quot;,&quot;filter_method&quot;:&quot;Adaptive&quot;,&quot;interlace_method&quot;:&quot;No Interlace&quot;}"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-phys/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-phys/.content.xml
index 662a66510..e0c13dfdf 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-phys/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-phys/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    pixels_per_unit_x="7559"
-    pixels_per_unit_y="7559"
-    unit_specifier="Metres"/>
+          jcr:primaryType="sling:Folder"
+          pixels_per_unit_x="7559"
+          pixels_per_unit_y="7559"
+          unit_specifier="Metres"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-srgb/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-srgb/.content.xml
index 0c299cbe2..0bf5d7b04 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-srgb/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/16x9.png/_jcr_content/metadata/png-srgb/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    srgb_rendering_intent="Perceptual"/>
+          jcr:primaryType="sling:Folder"
+          srgb_rendering_intent="Perceptual"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/.content.xml
index fa223c167..a11e1d9fb 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/.content.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T13:01:41.410-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Asset">
+          jcr:lastModified="{Date}2020-07-13T13:01:41.410-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:lastModified="{Date}2020-07-13T13:01:41.410-07:00"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/per-data/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/per-data/.content.xml
index 9e52fec65..2c386f22b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/per-data/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/per-data/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    height="{Long}128"
-    width="{Long}128"/>
+          jcr:primaryType="sling:Folder"
+          height="{Long}128"
+          width="{Long}128"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-gama/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-gama/.content.xml
index 16d7f1f24..7c15ba3b8 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-gama/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-gama/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    image_gamma="0.455"/>
+          jcr:primaryType="sling:Folder"
+          image_gamma="0.455"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-ihdr/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-ihdr/.content.xml
index 33b6435a6..9316c7ac8 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-ihdr/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-ihdr/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    raw_tags="\{&quot;image_width&quot;:&quot;128&quot;,&quot;image_height&quot;:&quot;128&quot;,&quot;bits_per_sample&quot;:&quot;8&quot;,&quot;color_type&quot;:&quot;True Color&quot;,&quot;compression_type&quot;:&quot;Deflate&quot;,&quot;filter_method&quot;:&quot;Adaptive&quot;,&quot;interlace_method&quot;:&quot;No Interlace&quot;}"/>
+          jcr:primaryType="sling:Folder"
+          raw_tags="\{&quot;image_width&quot;:&quot;128&quot;,&quot;image_height&quot;:&quot;128&quot;,&quot;bits_per_sample&quot;:&quot;8&quot;,&quot;color_type&quot;:&quot;True Color&quot;,&quot;compression_type&quot;:&quot;Deflate&quot;,&quot;filter_method&quot;:&quot;Adaptive&quot;,&quot;interlace_method&quot;:&quot;No Interlace&quot;}"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-phys/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-phys/.content.xml
index 662a66510..e0c13dfdf 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-phys/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-phys/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    pixels_per_unit_x="7559"
-    pixels_per_unit_y="7559"
-    unit_specifier="Metres"/>
+          jcr:primaryType="sling:Folder"
+          pixels_per_unit_x="7559"
+          pixels_per_unit_y="7559"
+          unit_specifier="Metres"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-srgb/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-srgb/.content.xml
index 0c299cbe2..0bf5d7b04 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-srgb/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/1x1.png/_jcr_content/metadata/png-srgb/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    srgb_rendering_intent="Perceptual"/>
+          jcr:primaryType="sling:Folder"
+          srgb_rendering_intent="Perceptual"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/.content.xml
index 1bbc81d2d..afc2a3ced 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/.content.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T12:44:11.037-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Asset">
+          jcr:lastModified="{Date}2020-07-13T12:44:11.037-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:lastModified="{Date}2020-07-13T12:44:11.037-07:00"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml
index 46702fae8..acbf82d14 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    color_transform="YCbCr"
-    dct_encode_version="25600"
-    flags_0="192"
-    flags_1="0"/>
+          jcr:primaryType="sling:Folder"
+          color_transform="YCbCr"
+          dct_encode_version="25600"
+          flags_0="192"
+          flags_1="0"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/ducky/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/ducky/.content.xml
index 9a5001f5c..65abc6fc1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/ducky/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/ducky/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    quality="100"/>
+          jcr:primaryType="sling:Folder"
+          quality="100"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/huffman/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/huffman/.content.xml
index 950a7aa65..14ab0c096 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/huffman/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/huffman/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    number_of_tables="4 Huffman tables"/>
+          jcr:primaryType="sling:Folder"
+          number_of_tables="4 Huffman tables"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/jpeg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/jpeg/.content.xml
index f0bacd7a4..bf31d3ba4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/jpeg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/jpeg/.content.xml
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    component_1="Y component: Quantization table 0, Sampling factors 1 horiz/1 vert"
-    component_2="Cb component: Quantization table 1, Sampling factors 1 horiz/1 vert"
-    component_3="Cr component: Quantization table 1, Sampling factors 1 horiz/1 vert"
-    compression_type="Baseline"
-    data_precision="8 bits"
-    image_height="1024 pixels"
-    image_width="1280 pixels"
-    number_of_components="3"/>
+          jcr:primaryType="sling:Folder"
+          component_1="Y component: Quantization table 0, Sampling factors 1 horiz/1 vert"
+          component_2="Cb component: Quantization table 1, Sampling factors 1 horiz/1 vert"
+          component_3="Cr component: Quantization table 1, Sampling factors 1 horiz/1 vert"
+          compression_type="Baseline"
+          data_precision="8 bits"
+          image_height="1024 pixels"
+          image_width="1280 pixels"
+          number_of_components="3"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/per-data/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/per-data/.content.xml
index d58bd972b..76687f7f0 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/per-data/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/per-data/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    height="{Long}1024"
-    width="{Long}1280"/>
+          jcr:primaryType="sling:Folder"
+          height="{Long}1024"
+          width="{Long}1280"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/xmp/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/xmp/.content.xml
index 2ad469bdb..5590c784e 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/xmp/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/man.jpg/_jcr_content/metadata/xmp/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    xmp_value_count="7"/>
+          jcr:primaryType="sling:Folder"
+          xmp_value_count="7"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/.content.xml
index 3cca49c36..2f41200eb 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/.content.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T12:44:17.949-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Asset">
+          jcr:lastModified="{Date}2020-07-13T12:44:17.949-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:lastModified="{Date}2020-07-13T12:44:17.949-07:00"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml
index 46702fae8..acbf82d14 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/adobe_jpeg/.content.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    color_transform="YCbCr"
-    dct_encode_version="25600"
-    flags_0="192"
-    flags_1="0"/>
+          jcr:primaryType="sling:Folder"
+          color_transform="YCbCr"
+          dct_encode_version="25600"
+          flags_0="192"
+          flags_1="0"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/ducky/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/ducky/.content.xml
index 9a5001f5c..65abc6fc1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/ducky/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/ducky/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    quality="100"/>
+          jcr:primaryType="sling:Folder"
+          quality="100"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/huffman/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/huffman/.content.xml
index 950a7aa65..14ab0c096 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/huffman/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/huffman/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    number_of_tables="4 Huffman tables"/>
+          jcr:primaryType="sling:Folder"
+          number_of_tables="4 Huffman tables"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/jpeg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/jpeg/.content.xml
index f0bacd7a4..bf31d3ba4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/jpeg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/jpeg/.content.xml
@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    component_1="Y component: Quantization table 0, Sampling factors 1 horiz/1 vert"
-    component_2="Cb component: Quantization table 1, Sampling factors 1 horiz/1 vert"
-    component_3="Cr component: Quantization table 1, Sampling factors 1 horiz/1 vert"
-    compression_type="Baseline"
-    data_precision="8 bits"
-    image_height="1024 pixels"
-    image_width="1280 pixels"
-    number_of_components="3"/>
+          jcr:primaryType="sling:Folder"
+          component_1="Y component: Quantization table 0, Sampling factors 1 horiz/1 vert"
+          component_2="Cb component: Quantization table 1, Sampling factors 1 horiz/1 vert"
+          component_3="Cr component: Quantization table 1, Sampling factors 1 horiz/1 vert"
+          compression_type="Baseline"
+          data_precision="8 bits"
+          image_height="1024 pixels"
+          image_width="1280 pixels"
+          number_of_components="3"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/per-data/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/per-data/.content.xml
index d58bd972b..76687f7f0 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/per-data/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/per-data/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    height="{Long}1024"
-    width="{Long}1280"/>
+          jcr:primaryType="sling:Folder"
+          height="{Long}1024"
+          width="{Long}1280"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/xmp/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/xmp/.content.xml
index 2ad469bdb..5590c784e 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/xmp/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/placeholders/woman.jpg/_jcr_content/metadata/xmp/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    xmp_value_count="7"/>
+          jcr:primaryType="sling:Folder"
+          xmp_value_count="7"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/.content.xml
index 49799f872..ec8a00023 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/.content.xml
@@ -1,34 +1,34 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="sling:OrderedFolder"
-  jcr:title="samples"
-  doNotCopy="{Boolean}true"
-  jcr:description="samples">
-    <aerial-sailboat.jpg />
-    <anchored.jpg />
-    <architecture-blue-skies_extra-large.jpg />
-    <architecture-blue-skies_large.jpg />
-    <beach-bird-s-eye-view-daytime-1249586.jpg />
-    <beach-boats-ocean_large.jpg />
-    <beach-boats-ocean_small.jpg />
-    <beach-clouds-daytime_large.jpg />
-    <beach-clouds-daytime_small.jpg />
-    <boat-rope-hanging-knot_large.jpg />
-    <boat-rope-hanging-knot_small.jpg />
-    <chain-close-up-daylight-1170601.jpg />
-    <close-up-cordage.jpg />
-    <clouds-daylight-environment_large.jpg />
-    <clouds-daylight-environment_small.jpg />
-    <clouds-golden-hour-nature-944440.jpg />
-    <harbor-sunet_large.jpg />
-    <harbot-sunet_small.jpg />
-    <heel_large.jpg />
-    <heel_small.jpg />
-    <oldboat_large.jpg />
-    <oldboat_small.jpg />
-    <organized-lg.jpg />
+          jcr:primaryType="sling:OrderedFolder"
+          jcr:title="samples"
+          doNotCopy="{Boolean}true"
+          jcr:description="samples">
+    <aerial-sailboat.jpg/>
+    <anchored.jpg/>
+    <architecture-blue-skies_extra-large.jpg/>
+    <architecture-blue-skies_large.jpg/>
+    <beach-bird-s-eye-view-daytime-1249586.jpg/>
+    <beach-boats-ocean_large.jpg/>
+    <beach-boats-ocean_small.jpg/>
+    <beach-clouds-daytime_large.jpg/>
+    <beach-clouds-daytime_small.jpg/>
+    <boat-rope-hanging-knot_large.jpg/>
+    <boat-rope-hanging-knot_small.jpg/>
+    <chain-close-up-daylight-1170601.jpg/>
+    <close-up-cordage.jpg/>
+    <clouds-daylight-environment_large.jpg/>
+    <clouds-daylight-environment_small.jpg/>
+    <clouds-golden-hour-nature-944440.jpg/>
+    <harbor-sunet_large.jpg/>
+    <harbot-sunet_small.jpg/>
+    <heel_large.jpg/>
+    <heel_small.jpg/>
+    <oldboat_large.jpg/>
+    <oldboat_small.jpg/>
+    <organized-lg.jpg/>
     <organized-small.jpg/>
-    <peregrine-logo.svg />
-    <sailing-lake_large.jpg />
-    <sailing-lake_small.jpg />
+    <peregrine-logo.svg/>
+    <sailing-lake_large.jpg/>
+    <sailing-lake_small.jpg/>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/aerial-sailboat.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/anchored.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_extra-large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-boats-ocean_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/close-up-cordage.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-daylight-environment_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/clouds-golden-hour-nature-944440.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbor-sunet_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/harbot-sunet_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/heel_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/.content.xml
index f4d206ea5..77b58c549 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/oldboat_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-lg.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/organized-small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/.content.xml
index 51caa68c4..04d333c5b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/svg+xml"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/peregrine-logo.svg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_large.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/.content.xml
index e58ee4c84..d29abb903 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/.content.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:primaryType="per:Asset">
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:mimeType="image/jpeg"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sailing-lake_small.jpg/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/.content.xml
index 54b26bc51..49d9986a9 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/.content.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2019-10-14T13:47:00.867-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Asset">
+          jcr:lastModified="{Date}2019-10-14T13:47:00.867-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Asset">
     <jcr:content
         jcr:data="{Binary}"
         jcr:lastModified="{Date}2019-10-14T13:47:00.867-07:00"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/.content.xml
index 491392d53..3d0c31ab4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/.content.xml
@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"/>
+          jcr:primaryType="sling:Folder"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/per-data/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/per-data/.content.xml
index 8c0f0eafe..ffa7570bd 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/per-data/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/per-data/.content.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    height="{Long}35"
-    width="{Long}36"/>
+          jcr:primaryType="sling:Folder"
+          height="{Long}35"
+          width="{Long}36"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-ihdr/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-ihdr/.content.xml
index 92533f11e..ae78f3c69 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-ihdr/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-ihdr/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    raw_tags="\{&quot;image_width&quot;:&quot;36&quot;,&quot;image_height&quot;:&quot;35&quot;,&quot;bits_per_sample&quot;:&quot;8&quot;,&quot;color_type&quot;:&quot;Indexed Color&quot;,&quot;compression_type&quot;:&quot;Deflate&quot;,&quot;filter_method&quot;:&quot;Adaptive&quot;,&quot;interlace_method&quot;:&quot;No Interlace&quot;}"/>
+          jcr:primaryType="sling:Folder"
+          raw_tags="\{&quot;image_width&quot;:&quot;36&quot;,&quot;image_height&quot;:&quot;35&quot;,&quot;bits_per_sample&quot;:&quot;8&quot;,&quot;color_type&quot;:&quot;Indexed Color&quot;,&quot;compression_type&quot;:&quot;Deflate&quot;,&quot;filter_method&quot;:&quot;Adaptive&quot;,&quot;interlace_method&quot;:&quot;No Interlace&quot;}"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-plte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-plte/.content.xml
index 194e7af84..5a6070b1b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-plte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-plte/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    palette_size="256"/>
+          jcr:primaryType="sling:Folder"
+          palette_size="256"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-text/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-text/.content.xml
index fbf0cf604..cec3f8731 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-text/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-text/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    textual_data="Software: Adobe ImageReady"/>
+          jcr:primaryType="sling:Folder"
+          textual_data="Software: Adobe ImageReady"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-trns/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-trns/.content.xml
index 0fb67cdd6..b5e3b5f99 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-trns/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/png-trns/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    palette_has_transparency="Yes"/>
+          jcr:primaryType="sling:Folder"
+          palette_has_transparency="Yes"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/xmp/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/xmp/.content.xml
index 2ad469bdb..5590c784e 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/xmp/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/assets/samples/sample-logo.png/_jcr_content/metadata/xmp/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:primaryType="sling:Folder"
-    xmp_value_count="7"/>
+          jcr:primaryType="sling:Folder"
+          xmp_value_count="7"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/object-definitions/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/object-definitions/.content.xml
index 8d1116982..df3b7482d 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/object-definitions/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/object-definitions/.content.xml
@@ -1,7 +1,7 @@
 <jcr:root
-  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="sling:OrderedFolder"
-  jcr:title="themecleanflex object definitions root"
-  jcr:description="themecleanflex Object Definitions Root">
+    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:OrderedFolder"
+    jcr:title="themecleanflex object definitions root"
+    jcr:description="themecleanflex Object Definitions Root">
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/.content.xml
index e4405043f..faf76d193 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/.content.xml
@@ -1,16 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root
-  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="per:Page"
-  jcr:title="themecleanflex root object"
-  jcr:description="themecleanflex Objects Root">
-
-  <jcr:content
-    jcr:primaryType="per:PageContent"
-    sling:resourceType="themecleanflex/components/page"
+    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="per:Page"
     jcr:title="themecleanflex root object"
-    brand="themecleanflex"
-    template="/content/themecleanflex/templates"/>
+    jcr:description="themecleanflex Objects Root">
+
+    <jcr:content
+        jcr:primaryType="per:PageContent"
+        sling:resourceType="themecleanflex/components/page"
+        jcr:title="themecleanflex root object"
+        brand="themecleanflex"
+        template="/content/themecleanflex/templates"/>
 
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/tags/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/tags/.content.xml
index 83565eb11..56735e1bc 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/tags/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/objects/tags/.content.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="sling:OrderedFolder"
-  allowedObjects="[tag]"/>
+          jcr:primaryType="sling:OrderedFolder"
+          allowedObjects="[tag]"/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/.content.xml
index 6d72b69a4..fcabf7509 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/.content.xml
@@ -1,62 +1,62 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <jcr:root
-  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-  jcr:primaryType="per:Page"
-  jcr:title="themecleanflex root page"
-  jcr:description="themecleanflex Pages Root">
-
-  <jcr:content
-    jcr:primaryType="per:PageContent"
-    sling:resourceType="themecleanflex/components/page"
+    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="per:Page"
     jcr:title="themecleanflex root page"
-    template="/content/themecleanflex/templates">
+    jcr:description="themecleanflex Pages Root">
 
-    <replacements jcr:primaryType="nt:unstructured">
+    <jcr:content
+        jcr:primaryType="per:PageContent"
+        sling:resourceType="themecleanflex/components/page"
+        jcr:title="themecleanflex root page"
+        template="/content/themecleanflex/templates">
 
-      <manifest.json jcr:primaryType="nt:unstructured">
+        <replacements jcr:primaryType="nt:unstructured">
 
-        <shortName
-          jcr:primaryType="nt:unstructured"
-          regex="\\&quot;short_name\\&quot;: \\&quot;(.*)\\&quot;"
-          replaceWith="&quot;short_name&quot;: &quot;_SITENAME_&quot;"/>
+            <manifest.json jcr:primaryType="nt:unstructured">
 
-        <name
-          jcr:primaryType="nt:unstructured"
-          regex="\\&quot;name\\&quot;: \\&quot;(.*)\\&quot;"
-          replaceWith="&quot;name&quot;: &quot;_SITENAME_ site&quot;"/>
+                <shortName
+                    jcr:primaryType="nt:unstructured"
+                    regex="\\&quot;short_name\\&quot;: \\&quot;(.*)\\&quot;"
+                    replaceWith="&quot;short_name&quot;: &quot;_SITENAME_&quot;"/>
 
-        <paths
-          jcr:primaryType="nt:unstructured"
-          regex="/themecleanflex"
-          replaceWith="/_SITENAME_"/>
+                <name
+                    jcr:primaryType="nt:unstructured"
+                    regex="\\&quot;name\\&quot;: \\&quot;(.*)\\&quot;"
+                    replaceWith="&quot;name&quot;: &quot;_SITENAME_ site&quot;"/>
 
-      </manifest.json>
+                <paths
+                    jcr:primaryType="nt:unstructured"
+                    regex="/themecleanflex"
+                    replaceWith="/_SITENAME_"/>
 
-      <serviceworker.js jcr:primaryType="nt:unstructured">
+            </manifest.json>
 
-        <paths
-          jcr:primaryType="nt:unstructured"
-          regex="/themecleanflex"
-          replaceWith="/_SITENAME_"/>
+            <serviceworker.js jcr:primaryType="nt:unstructured">
 
-      </serviceworker.js>
+                <paths
+                    jcr:primaryType="nt:unstructured"
+                    regex="/themecleanflex"
+                    replaceWith="/_SITENAME_"/>
 
-    </replacements>
+            </serviceworker.js>
 
-    <intro
-      jcr:primaryType="nt:unstructured"
-      sling:resourceType="themecleanflex/components/richtext"
-      text="&lt;p&gt;This page has been left blank intentionally - it serves as the root container of the website.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child page called index to change the root page.&lt;/p&gt;"/>
+        </replacements>
 
-  </jcr:content>
-  <skeleton-pages/>
-  <css/>
-  <errors/>
-  <index/>
-  <articles/>
-  <authors/>
-  <sitemap/>
+        <intro
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/richtext"
+            text="&lt;p&gt;This page has been left blank intentionally - it serves as the root container of the website.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child page called index to change the root page.&lt;/p&gt;"/>
+
+    </jcr:content>
+    <skeleton-pages/>
+    <css/>
+    <errors/>
+    <index/>
+    <articles/>
+    <authors/>
+    <sitemap/>
 
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/.content.xml
index ffa2f8ce9..a1b899f31 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T15:10:32.048-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T15:10:32.048-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T15:10:32.048-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/welcome/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/welcome/.content.xml
index 6a2602916..fea216ff1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/welcome/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/articles/welcome/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T14:35:39.479-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T14:35:39.479-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T14:35:39.479-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/.content.xml
index fd19cca8d..d7099dc9a 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T15:31:29.703-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T15:31:29.703-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T15:31:29.703-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/nicole-ford/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/nicole-ford/.content.xml
index f072f17ba..3e7dd2c90 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/nicole-ford/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/authors/nicole-ford/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T14:33:02.090-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T14:33:02.090-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T14:33:02.090-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/.content.xml
index b0b26b950..f19352aad 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/.content.xml
@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Page" jcr:title="themecleanflex" jcr:description="themecleanflex Site Root">
-    <jcr:content jcr:primaryType="per:PageContent" sling:resourceType="themecleanflex/components/page" jcr:title="css" template="/content/themecleanflex/templates" excludeFromSitemap="{Boolean}true" excludeTreeFromSitemap="{Boolean}true">
-        <intro jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;This page has been left blank intentionally - it serves as the container.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child pages to customize the css of this site.&lt;/p&gt;" />
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Page" jcr:title="themecleanflex"
+          jcr:description="themecleanflex Site Root">
+    <jcr:content jcr:primaryType="per:PageContent" sling:resourceType="themecleanflex/components/page" jcr:title="css"
+                 template="/content/themecleanflex/templates" excludeFromSitemap="{Boolean}true"
+                 excludeTreeFromSitemap="{Boolean}true">
+        <intro jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+               text="&lt;p&gt;This page has been left blank intentionally - it serves as the container.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child pages to customize the css of this site.&lt;/p&gt;"/>
     </jcr:content>
 </jcr:root>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/commons.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/commons.css
index c8dd58498..dce1d6646 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/commons.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/commons.css
@@ -1,97 +1,97 @@
 /* Colors */
 #peregrine-app {
-  --bg-primary: #ffffff;
-  --bg-secondary: #ffffff;
+    --bg-primary: #ffffff;
+    --bg-secondary: #ffffff;
 
-  --text-primary-color: #000000;
-  --text-secondary-color: #000000;
+    --text-primary-color: #000000;
+    --text-secondary-color: #000000;
 
-  --border-primary-color: #808080;
+    --border-primary-color: #808080;
 
-  --link-primary-color: var(--color-blue-700);
-  --link-primary-color-hover: var(--color-blue-800);;
+    --link-primary-color: var(--color-blue-700);
+    --link-primary-color-hover: var(--color-blue-800);;
 
-  --figcaption-primary-bg: rgba(255, 255, 255, 0);
+    --figcaption-primary-bg: rgba(255, 255, 255, 0);
 
-  --note-text-color: #000000;
+    --note-text-color: #000000;
 
-  --note-note-bg: var(--color-blue-200);
-  --note-note-border-color: var(--color-blue-500);
+    --note-note-bg: var(--color-blue-200);
+    --note-note-border-color: var(--color-blue-500);
 
-  --note-tip-bg: var(--color-green-200);
-  --note-tip-border-color: var(--color-green-500);
+    --note-tip-bg: var(--color-green-200);
+    --note-tip-border-color: var(--color-green-500);
 
-  --note-warning-bg: var(--color-orange-200);
-  --note-warning-border-color: var(--color-orange-500);
+    --note-warning-bg: var(--color-orange-200);
+    --note-warning-border-color: var(--color-orange-500);
 
-  --note-important-bg: var(--color-red-200);
-  --note-important-border-color: var(--color-red-500);
+    --note-important-bg: var(--color-red-200);
+    --note-important-border-color: var(--color-red-500);
 
-  --note-caution-bg: var(--color-yellow-200);
-  --note-caution-border-color: var(--color-yellow-500);
+    --note-caution-bg: var(--color-yellow-200);
+    --note-caution-border-color: var(--color-yellow-500);
 
-  --focus-border-color: var(--color-blue-900);
+    --focus-border-color: var(--color-blue-900);
 
-  --btn-color: #ffffff;
-  --btn-bg: var(--color-blue-700);
-  --btn-hover-bg: var(--color-blue-800);
-  --btn-hover-color: #ffffff;
-  --btn-focus-color: #ffffff;
-  --btn-focus-bg: var(--color-blue-800);
-  --btn-focus-border-color: var(--focus-border-color);
+    --btn-color: #ffffff;
+    --btn-bg: var(--color-blue-700);
+    --btn-hover-bg: var(--color-blue-800);
+    --btn-hover-color: #ffffff;
+    --btn-focus-color: #ffffff;
+    --btn-focus-bg: var(--color-blue-800);
+    --btn-focus-border-color: var(--focus-border-color);
 
-  --btn-primary-color: var(--btn-color);
-  --btn-primary-bg: var(--btn-bg);
-  --btn-primary-hover-bg: var(--btn-hover-bg);
-  --btn-primary-hover-color: var(--btn-hover-color);
-  --btn-primary-focus-color: var(--btn-focus-color);
-  --btn-primary-focus-bg: var(--btn-focus-bg);
-  --btn-primary-focus-border-color: var(--btn-focus-border-color);
+    --btn-primary-color: var(--btn-color);
+    --btn-primary-bg: var(--btn-bg);
+    --btn-primary-hover-bg: var(--btn-hover-bg);
+    --btn-primary-hover-color: var(--btn-hover-color);
+    --btn-primary-focus-color: var(--btn-focus-color);
+    --btn-primary-focus-bg: var(--btn-focus-bg);
+    --btn-primary-focus-border-color: var(--btn-focus-border-color);
 
-  --btn-secondary-bg: var(--color-gray-200);
-  --btn-secondary-color: var(--color-gray-800);
-  --btn-secondary-border-width: 1px;
-  --btn-secondary-border-color: var(--color-gray-300);
-  --btn-secondary-border-width: 1px;
-  --btn-secondary-hover-bg: var(--color-blue-800);
-  --btn-secondary-hover-color: #ffffff;
-  --btn-secondary-focus-color: var(--btn-primary-color);
-  --btn-secondary-focus-bg: var(--btn-focus-bg);
-  --btn-secondary-focus-border-color: var(--btn-focus-border-color);
+    --btn-secondary-bg: var(--color-gray-200);
+    --btn-secondary-color: var(--color-gray-800);
+    --btn-secondary-border-width: 1px;
+    --btn-secondary-border-color: var(--color-gray-300);
+    --btn-secondary-border-width: 1px;
+    --btn-secondary-hover-bg: var(--color-blue-800);
+    --btn-secondary-hover-color: #ffffff;
+    --btn-secondary-focus-color: var(--btn-primary-color);
+    --btn-secondary-focus-bg: var(--btn-focus-bg);
+    --btn-secondary-focus-border-color: var(--btn-focus-border-color);
 
-  --btn-success-bg: var(--color-green-600);
-  --btn-success-hover-bg: var(--color-green-800);
+    --btn-success-bg: var(--color-green-600);
+    --btn-success-hover-bg: var(--color-green-800);
 
-  --btn-danger-bg: var(--color-red-600);
-  --btn-danger-hover-bg: var(--color-red-800);
+    --btn-danger-bg: var(--color-red-600);
+    --btn-danger-hover-bg: var(--color-red-800);
 
-  --btn-warning-bg: var(--color-orange-600);
-  --btn-warning-hover-bg: var(--color-orange-800);
+    --btn-warning-bg: var(--color-orange-600);
+    --btn-warning-hover-bg: var(--color-orange-800);
 
-  --btn-light-bg: var(--color-blue-100);
-  --btn-light-color: var(--link-primary-color);
-  --btn-light-hover-bg: var(--color-blue-300);
+    --btn-light-bg: var(--color-blue-100);
+    --btn-light-color: var(--link-primary-color);
+    --btn-light-hover-bg: var(--color-blue-300);
 
-  --btn-dark-bg: black;
-  --btn-dark-color: var(--btn-primary-color);
-  --btn-dark-hover-bg: var(--color-gray-900);
+    --btn-dark-bg: black;
+    --btn-dark-color: var(--btn-primary-color);
+    --btn-dark-hover-bg: var(--color-gray-900);
 }
 
 #peregrine-app .theme-dark {
-  --note-text-color: #ffffff;
+    --note-text-color: #ffffff;
 
-  --note-note-bg: var(--color-blue-600);
-  --note-note-border-color: var(--color-blue-900);
+    --note-note-bg: var(--color-blue-600);
+    --note-note-border-color: var(--color-blue-900);
 
-  --note-tip-bg: var(--color-green-600);
-  --note-tip-border-color: var(--color-green-900);
+    --note-tip-bg: var(--color-green-600);
+    --note-tip-border-color: var(--color-green-900);
 
-  --note-warning-bg: var(--color-orange-600);
-  --note-warning-border-color: var(--color-orange-900);
+    --note-warning-bg: var(--color-orange-600);
+    --note-warning-border-color: var(--color-orange-900);
 
-  --note-important-bg: var(--color-red-600);
-  --note-important-border-color: var(--color-red-900);
+    --note-important-bg: var(--color-red-600);
+    --note-important-border-color: var(--color-red-900);
 
-  --note-caution-bg: var(--color-yellow-600);
-  --note-caution-border-color: var(--color-yellow-900);
+    --note-caution-bg: var(--color-yellow-600);
+    --note-caution-border-color: var(--color-yellow-900);
 }
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/custom.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/custom.css
index 4b327b571..6c8cecf28 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/custom.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/custom.css
@@ -1,20 +1,20 @@
 :root {
-  /* Font Families */
-  /* Web font families can be imported here, or by editing your base page templates siteCSS */
+    /* Font Families */
+    /* Web font families can be imported here, or by editing your base page templates siteCSS */
 
-  /* --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
-  /* --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; */
-  /* --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
+    /* --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
+    /* --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; */
+    /* --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
 
-  /* Font size overrides */
+    /* Font size overrides */
 
-  /* --font-size-sm: 1rem; */
-  /*--font-size-base: 1.125rem;*/
-  /*--font-size-lg: 1.25rem;*/
-  /*--font-size-xl: 1.5rem;*/
-  /*--font-size-2xl: 1.875rem;*/
-  /*--font-size-3xl: 2.25rem;*/
-  /* --font-size-4xl: 5rem; */
-  /*--font-size-5xl: 3rem;*/
-  /*--font-size-6xl: 4rem;*/
+    /* --font-size-sm: 1rem; */
+    /*--font-size-base: 1.125rem;*/
+    /*--font-size-lg: 1.25rem;*/
+    /*--font-size-xl: 1.5rem;*/
+    /*--font-size-2xl: 1.875rem;*/
+    /*--font-size-3xl: 2.25rem;*/
+    /* --font-size-4xl: 5rem; */
+    /*--font-size-5xl: 3rem;*/
+    /*--font-size-6xl: 4rem;*/
 }
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palette.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palette.css
index 46ec62178..b6eb3fef7 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palette.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palette.css
@@ -1,220 +1,220 @@
 /* takes loaded vars and styles the page ONLY USE VARS FOR COLORS HERE! */
 
 #peregrine-app {
-  background: var(--bg-primary);
-  color: var(--text-primary-color);
+    background: var(--bg-primary);
+    color: var(--text-primary-color);
 }
 
 #peregrine-app .theme-light,
 #peregrine-app .theme-dark {
-  background: var(--bg-primary);
+    background: var(--bg-primary);
 }
 
 #peregrine-app *:not(hr) {
-  border-color: var(--border-primary-color);
-  color: var(--text-primary-color);
+    border-color: var(--border-primary-color);
+    color: var(--text-primary-color);
 }
 
 #peregrine-app a:not(.btn),
 #peregrine-app a:not(.btn) * {
-  color: var(--link-primary-color);
+    color: var(--link-primary-color);
 }
 
 #peregrine-app a:not(.btn):hover,
 #peregrine-app a:not(.btn) *:hover {
-  color: var(--link-primary-color-hover);
+    color: var(--link-primary-color-hover);
 }
 
 #peregrine-app a:focus {
-  box-shadow: 0 0 0 3px var(--focus-border-color);
-  outline: 2px solid transparent; /* Windows High Contrast Mode */
-  outline-offset: 1px;
+    box-shadow: 0 0 0 3px var(--focus-border-color);
+    outline: 2px solid transparent; /* Windows High Contrast Mode */
+    outline-offset: 1px;
 }
 
 #peregrine-app .btn {
-  color: var(--btn-color);
-  background: var(--btn-bg);
+    color: var(--btn-color);
+    background: var(--btn-bg);
 }
 
 #peregrine-app .btn:focus {
-  color: var(--btn-focus-color);
-  background: var(--btn-focus-bg);
-  box-shadow: 0 0 0 3px var(--btn-focus-border-color);
-  outline: 2px solid transparent; /* Windows High Contrast Mode */
+    color: var(--btn-focus-color);
+    background: var(--btn-focus-bg);
+    box-shadow: 0 0 0 3px var(--btn-focus-border-color);
+    outline: 2px solid transparent; /* Windows High Contrast Mode */
 }
 
 #peregrine-app .btn:hover {
-  color: var(--btn-hover-color);
-  background: var(--btn-hover-bg);
+    color: var(--btn-hover-color);
+    background: var(--btn-hover-bg);
 }
 
 #peregrine-app .btn.btn-primary {
-  color: var(--btn-primary-color);
-  background: var(--btn-primary-bg);
+    color: var(--btn-primary-color);
+    background: var(--btn-primary-bg);
 }
 
 #peregrine-app .btn.btn-primary:focus {
-  color: var(--btn-primary-focus-color);
-  background: var(--btn-primary-focus-bg);
-  box-shadow: 0 0 0 3px var(--btn-primary-focus-border-color);
+    color: var(--btn-primary-focus-color);
+    background: var(--btn-primary-focus-bg);
+    box-shadow: 0 0 0 3px var(--btn-primary-focus-border-color);
 }
 
 #peregrine-app .btn.btn-primary:hover {
-  color: var(--btn-primary-hover-color, var(--btn-hover-color, #ffffff));
-  background: var(--btn-primary-hover-bg);
-  border-color: var(--btn-primary-hover-border-color);
+    color: var(--btn-primary-hover-color, var(--btn-hover-color, #ffffff));
+    background: var(--btn-primary-hover-bg);
+    border-color: var(--btn-primary-hover-border-color);
 }
 
 #peregrine-app .btn.btn-secondary {
-  color: var(--btn-secondary-color);
-  background: var(--btn-secondary-bg);
-  border-color: var(--btn-secondary-border-color);
-  border-width: var(--btn-secondary-border-width);
+    color: var(--btn-secondary-color);
+    background: var(--btn-secondary-bg);
+    border-color: var(--btn-secondary-border-color);
+    border-width: var(--btn-secondary-border-width);
 }
 
 #peregrine-app .btn.btn-secondary:focus {
-  color: var(--btn-secondary-focus-color);
-  background: var(--btn-secondary-focus-bg);
-  box-shadow: 0 0 0 3px var(--btn-secondary-focus-border-color);
-  border-color: transparent;
+    color: var(--btn-secondary-focus-color);
+    background: var(--btn-secondary-focus-bg);
+    box-shadow: 0 0 0 3px var(--btn-secondary-focus-border-color);
+    border-color: transparent;
 }
 
 #peregrine-app .btn.btn-secondary:hover {
-  color: var(--btn-secondary-hover-color);
-  background: var(--btn-secondary-hover-bg);
-  border-color: var(--btn-secondary-hover-border-color);
+    color: var(--btn-secondary-hover-color);
+    background: var(--btn-secondary-hover-bg);
+    border-color: var(--btn-secondary-hover-border-color);
 }
 
 #peregrine-app .btn.btn-success {
-  background: var(--btn-success-bg) !important;
-  color: var(--btn-primary-color);
+    background: var(--btn-success-bg) !important;
+    color: var(--btn-primary-color);
 }
 
 #peregrine-app .btn.btn-success:hover {
-  background: var(--btn-success-hover-bg) !important;
-  color: var(--btn-success-hover-color, var(--btn-primary-color));
+    background: var(--btn-success-hover-bg) !important;
+    color: var(--btn-success-hover-color, var(--btn-primary-color));
 }
 
 #peregrine-app .btn.btn-danger {
-  background: var(--btn-danger-bg) !important;
-  color: var(--btn-primary-color);
+    background: var(--btn-danger-bg) !important;
+    color: var(--btn-primary-color);
 }
 
 #peregrine-app .btn.btn-danger:hover {
-  background: var(--btn-danger-hover-bg) !important;
-  color: var(--btn-danger-hover-color, var(--btn-primary-color));
+    background: var(--btn-danger-hover-bg) !important;
+    color: var(--btn-danger-hover-color, var(--btn-primary-color));
 }
 
 #peregrine-app .btn.btn-warning {
-  background: var(--btn-warning-bg) !important;
-  color: var(--btn-warning-color, var(--btn-primary-color));
+    background: var(--btn-warning-bg) !important;
+    color: var(--btn-warning-color, var(--btn-primary-color));
 }
 
 #peregrine-app .btn.btn-warning:hover {
-  background: var(--btn-warning-hover-bg) !important;
-  color: var(--btn-warning-hover-color, var(--btn-primary-color));
+    background: var(--btn-warning-hover-bg) !important;
+    color: var(--btn-warning-hover-color, var(--btn-primary-color));
 }
 
 #peregrine-app .btn.btn-light {
-  background: var(--btn-light-bg) !important;
-  color: var(--btn-light-color);
+    background: var(--btn-light-bg) !important;
+    color: var(--btn-light-color);
 }
 
 #peregrine-app .btn.btn-light:hover {
-  background: var(--btn-light-hover-bg) !important;
-  color: var(--btn-light-hover-color, var(--link-primary-color));
+    background: var(--btn-light-hover-bg) !important;
+    color: var(--btn-light-hover-color, var(--link-primary-color));
 }
 
 #peregrine-app .btn.btn-dark {
-  background: var(--btn-dark-bg) !important;
-  color: var(--btn-dark-color);
+    background: var(--btn-dark-bg) !important;
+    color: var(--btn-dark-color);
 }
 
 #peregrine-app .btn.btn-dark:hover {
-  background: var(--btn-dark-hover-bg) !important;
-  color: var(--btn-dark-hover-color, var(--btn-primary-color));
+    background: var(--btn-dark-hover-bg) !important;
+    color: var(--btn-dark-hover-color, var(--btn-primary-color));
 }
 
 #peregrine-app .theme-light .accordion-container,
 #peregrine-app .theme-dark .accordion-container {
-  background: var(--bg-primary);
+    background: var(--bg-primary);
 }
 
 #peregrine-app .accordion-toggle-button {
-  font-family: inherit;
-  -webkit-appearance: none;
-  border: 0;
-  background: none;
+    font-family: inherit;
+    -webkit-appearance: none;
+    border: 0;
+    background: none;
 }
 
 #peregrine-app .accordion-toggle-button:focus {
-  outline: 0;
+    outline: 0;
 }
 
 #peregrine-app .accordion-toggle-button:focus svg {
-  fill: var(--btn-focus-border-color, blue);
+    fill: var(--btn-focus-border-color, blue);
 }
 
 #peregrine-app svg:not(.fill-current) {
-  fill: var(--text-primary-color)
+    fill: var(--text-primary-color)
 }
 
 #peregrine-app [class$="-components-carousel"] figcaption {
-  background-color: var(--figcaption-primary-bg, rgba(255, 255, 255, 0));
+    background-color: var(--figcaption-primary-bg, rgba(255, 255, 255, 0));
 }
 
 #peregrine-app .note-note,
 #peregrine-app .note-note * {
-  color: var(--note-text-color);
-  background-color: var(--note-note-bg);
-  border-color: var(--note-note-border-color);
+    color: var(--note-text-color);
+    background-color: var(--note-note-bg);
+    border-color: var(--note-note-border-color);
 }
 
 #peregrine-app .note-tip,
 #peregrine-app .note-tip * {
-  color: var(--note-text-color);
-  background-color: var(--note-tip-bg);
-  border-color: var(--note-tip-border-color);
+    color: var(--note-text-color);
+    background-color: var(--note-tip-bg);
+    border-color: var(--note-tip-border-color);
 }
 
 #peregrine-app .note-warning,
 #peregrine-app .note-warning * {
-  color: var(--note-text-color);
-  background-color: var(--note-warning-bg);
-  border-color: var(--note-warning-border-color);
+    color: var(--note-text-color);
+    background-color: var(--note-warning-bg);
+    border-color: var(--note-warning-border-color);
 }
 
 #peregrine-app .note-important,
 #peregrine-app .note-important * {
-  color: var(--note-text-color);
-  background-color: var(--note-important-bg);
-  border-color: var(--note-important-border-color);
+    color: var(--note-text-color);
+    background-color: var(--note-important-bg);
+    border-color: var(--note-important-border-color);
 }
 
 #peregrine-app .note-caution,
 #peregrine-app .note-caution * {
-  color: var(--note-text-color);
-  background-color: var(--note-caution-bg);
-  border-color: var(--note-caution-border-color);
+    color: var(--note-text-color);
+    background-color: var(--note-caution-bg);
+    border-color: var(--note-caution-border-color);
 }
 
 #peregrine-app [class$="-components-navigation"] a,
 #peregrine-app [class$="-components-navigation"] a * {
-  color: var(--text-primary-color);
+    color: var(--text-primary-color);
 }
 
 #peregrine-app [class$="-components-navigation"] a:hover,
 #peregrine-app [class$="-components-navigation"] a:hover {
-  color: var(--bg-primary);
-  background-color: var(--text-primary-color);
+    color: var(--bg-primary);
+    background-color: var(--text-primary-color);
 }
 
 #peregrine-app [class$="-components-navigation"] .dropdown-list {
-  background: var(--bg-primary);
+    background: var(--bg-primary);
 }
 
 #peregrine-app [class$="-components-tabs"] a[aria-selected="true"],
 #peregrine-app [class$="-components-tabs"] a[aria-selected="true"] * {
-  color: var(--btn-primary-color);
-  background-color: var(--btn-primary-bg);
+    color: var(--btn-primary-color);
+    background-color: var(--btn-primary-bg);
 }
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/balanced-color.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/balanced-color.css
index 85fa79a8b..023975852 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/balanced-color.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/balanced-color.css
@@ -4,41 +4,41 @@
     /* NONE definitions to overwrite :root vars */
 
 
-  }
-  
-  #peregrine-app .theme-light {
+}
+
+#peregrine-app .theme-light {
     --bg-primary: #85dccb;
     --bg-secondary: #ffd4e1;
-  
-    --text-primary-color:#46291f;
-    --text-secondary-color: #0A0A0A;
-  
+
+    --text-primary-color: #46291f;
+    --text-secondary-color: #0a0a0a;
+
     --border-primary-color: #7b7b7b;
-  
+
     --link-primary-color: #46291f;
     --link-primary-color-hover: #ffffff;
 
     --btn-primary-bg: #e4e4e4;
     --btn-primary-color: #000000;
-  
+
     --figcaption-primary-bg: #ffffff99;
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: #005c50;
     --bg-secondary: #5e1414;
-  
+
     --text-primary-color: #e6e6e6;
     --text-secondary-color: #ffb8b8;
-  
+
     --border-primary-color: var(--color-gray-900);
-  
+
     --link-primary-color: #e6e6e6;
     --link-primary-color-hover: #ffb8b8;
-  
+
     --btn-primary-bg: #e4e4e4;
     --btn-primary-color: #000000;
 
     --figcaption-primary-bg: #00000080;
-  }
+}
   
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/basic-maroon.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/basic-maroon.css
index bb021fe1e..27c894ad1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/basic-maroon.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/basic-maroon.css
@@ -4,39 +4,39 @@
     /* NONE definitions to overwrite :root vars */
 
 
-  }
-  
-  #peregrine-app .theme-light {
+}
+
+#peregrine-app .theme-light {
     --bg-primary: #dad6d6;
     --bg-secondary: #f5f5f5;
-  
-    --text-primary-color:#722525;
-    --text-secondary-color: #0A0A0A;
-  
+
+    --text-primary-color: #722525;
+    --text-secondary-color: #0a0a0a;
+
     --border-primary-color: var(--color-gray-300);
-  
+
     --link-primary-color: #722525;
 
     --btn-primary-bg: #722525;
     --btn-primary-color: #ffffff;
-  
+
     --figcaption-primary-bg: #ffffff99;
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: #5e5e5e;
     --bg-secondary: #2d2d2d;
-  
+
     --text-primary-color: #ffffff;
     --text-secondary-color: #810202;
-  
+
     --border-primary-color: var(--color-gray-100);
-  
+
     --link-primary-color: #dadada;
 
     --btn-primary-bg: #810202;
     --btn-primary-color: #ffffff;
-  
+
     --figcaption-primary-bg: #00000080;
-  }
+}
   
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/classy.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/classy.css
index ac4467ed3..a51532481 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/classy.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/classy.css
@@ -2,40 +2,40 @@
 
 #peregrine-app {
     /* NONE definitions to overwrite :root vars */
-  }
-  
-  #peregrine-app .theme-light {
+}
+
+#peregrine-app .theme-light {
     --bg-primary: #f4f4f4;
     --bg-secondary: #dcd0c0;
-  
-    --text-primary-color:#373737;
+
+    --text-primary-color: #373737;
     --text-secondary-color: #63365a;
-  
+
     --border-primary-color: #373737;
-  
+
     --link-primary-color: #373737;
     --link-primary-color-hover: #63365a;
-  
+
     --btn-primary-bg: #373737;
     --btn-primary-color: #f4f4f4;
-  
+
     --figcaption-primary-bg: #ffffff99;
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: #373737;
     --bg-secondary: #63365a;
-  
+
     --text-primary-color: #f4f4f4;
     --text-secondary-color: #dcd0c0;
-  
+
     --border-primary-color: #f4f4f4;
-  
+
     --link-primary-color: #f4f4f4;
     --link-primary-color-hover: #dcd0c0;
-  
+
     --btn-primary-bg: #f4f4f4;
     --btn-primary-color: #373737;
-  
+
     --figcaption-primary-bg: #00000080;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/lime.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/lime.css
index 385e8bbec..1a61b3e7b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/lime.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/lime.css
@@ -1,41 +1,41 @@
 /* lime palette */
 
 #peregrine-app {
-  /* NONE definitions to overwrite :root vars */
+    /* NONE definitions to overwrite :root vars */
 }
 
-#peregrine-app .theme-dark{
-  --bg-primary: var(--color-green-900);
-  --bg-secondary: var(--color-green-800);
+#peregrine-app .theme-dark {
+    --bg-primary: var(--color-green-900);
+    --bg-secondary: var(--color-green-800);
 
-  --text-primary-color: var(--color-gray-200);
-  --text-secondary-color: var(--color-gray-400);
+    --text-primary-color: var(--color-gray-200);
+    --text-secondary-color: var(--color-gray-400);
 
-  --border-primary-color: #cfc3c3;
+    --border-primary-color: #cfc3c3;
 
-  --link-primary-color: #ffffff;
-  --link-primary-color-hover: var(--color-green-200);
+    --link-primary-color: #ffffff;
+    --link-primary-color-hover: var(--color-green-200);
 
-  --btn-primary-bg: #cfc3c3;
-  --btn-primary-color: #000000;
+    --btn-primary-bg: #cfc3c3;
+    --btn-primary-color: #000000;
 
-  --figcaption-primary-bg: #00800080;
+    --figcaption-primary-bg: #00800080;
 }
 
 #peregrine-app .theme-light {
-  --bg-primary: var(--color-green-300);
-  --bg-secondary: var(--color-green-200);
+    --bg-primary: var(--color-green-300);
+    --bg-secondary: var(--color-green-200);
 
-  --text-primary-color: #000000;
-  --text-secondary-color: var(--color-gray-600);
+    --text-primary-color: #000000;
+    --text-secondary-color: var(--color-gray-600);
 
-  --border-primary-color: #6a6b69;
+    --border-primary-color: #6a6b69;
 
-  --btn-primary-bg: #6a6b69;
-  --btn-primary-color: #ffffff;
+    --btn-primary-bg: #6a6b69;
+    --btn-primary-color: #ffffff;
 
-  --link-primary-color: #000000;
-  --link-primary-color-hover: #ffffff;
+    --link-primary-color: #000000;
+    --link-primary-color-hover: #ffffff;
 
-  --figcaption-primary-bg: #8efd8e4d;
+    --figcaption-primary-bg: #8efd8e4d;
 }
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/multi-color.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/multi-color.css
index 02a29411e..4ecafbc39 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/multi-color.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/multi-color.css
@@ -4,39 +4,39 @@
     /* NONE definitions to overwrite :root vars */
 
 
-  }
-  
-  #peregrine-app .theme-light {
+}
+
+#peregrine-app .theme-light {
     --bg-primary: #eaf4f4;
     --bg-secondary: #ffffff;
-  
-    --text-primary-color:#232d42;
+
+    --text-primary-color: #232d42;
     --text-secondary-color: #a80000;
-  
+
     --border-primary-color: #dad6d6;
-  
+
     --link-primary-color: #232d42;
 
     --btn-primary-bg: #a80000;
     --btn-primary-color: #ffffff;
-  
+
     --figcaption-primary-bg: #ffffff99;
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: #232d42;
     --bg-secondary: #c1322d;
-  
+
     --text-primary-color: #eaf4f4;
     --text-secondary-color: #ffffff;
-  
+
     --border-primary-color: #b9b7b7;
-  
+
     --link-primary-color: #eaf4f4;
 
     --btn-primary-bg: #c1322d;
     --btn-primary-color: #ffffff;
-  
+
     --figcaption-primary-bg: #00000080;
-  }
+}
   
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sharp-blue.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sharp-blue.css
index 739208dd3..9365bfae2 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sharp-blue.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sharp-blue.css
@@ -2,40 +2,40 @@
 
 #peregrine-app {
     /* NONE definitions to overwrite :root vars */
-  }
-  
-  #peregrine-app .theme-light {
+}
+
+#peregrine-app .theme-light {
     --bg-primary: #d7dfdd;
     --bg-secondary: #f5f5f5;
-  
-    --text-primary-color:#0e0b16;
+
+    --text-primary-color: #0e0b16;
     --text-secondary-color: #4711f6;
-  
+
     --border-primary-color: #373737;
-  
+
     --link-primary-color: #0e0b16;
     --link-primary-color-hover: #4711f6;
-  
+
     --btn-primary-bg: #4711f6;
     --btn-primary-color: #d7dfdd;
-  
+
     --figcaption-primary-bg: #ffffff99;
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: #0e0b16;
     --bg-secondary: #00003c;
-  
+
     --text-primary-color: #d7dfdd;
     --text-secondary-color: #4711f6;
-  
+
     --border-primary-color: #d7dfdd;
-  
+
     --link-primary-color: #d7dfdd;
     --link-primary-color-hover: #4711f6;
-  
+
     --btn-primary-bg: #d7dfdd;
     --btn-primary-color: #4711f6;
-  
+
     --figcaption-primary-bg: #00000080;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sunshine.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sunshine.css
index 5eb99f081..e85d45d3f 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sunshine.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/sunshine.css
@@ -2,41 +2,41 @@
 
 #peregrine-app {
     /* NONE definitions to overwrite :root vars */
-  }
-  
-  #peregrine-app .theme-light {
+}
+
+#peregrine-app .theme-light {
     --bg-primary: #fcf2e9;
     --bg-secondary: #ffde22;
-  
+
     --text-primary-color: #1a1a1a;
     --text-secondary-color: var(--color-gray-700);
-  
+
     --border-primary-color: #1a1a1a;
-  
+
     --link-primary-color: #1a1a1a;
     --link-primary-color-hover: var(--color-gray-400);
-  
+
     --btn-primary-bg: #1a1a1a;
     --btn-primary-color: #fcf2e9;
-  
+
     --figcaption-primary-bg: #ffffff99;
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: #1a1a1a;
     --bg-secondary: var(--color-gray-700);
-  
+
     --text-primary-color: #ffde22;
     --text-secondary-color: var(--color-gray-400);
-  
+
     --border-primary-color: #ffde22;
-  
+
     --link-primary-color: #ffde22;
     --link-primary-color-hover: var(--color-gray-400);
-  
+
     --btn-primary-bg: #ffde22;
     --btn-primary-color: #1a1a1a;
-  
+
     --figcaption-primary-bg: #00000080;
-  }
+}
   
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/warm-tones.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/warm-tones.css
index 7d31de49b..cae706709 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/warm-tones.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes-attic/warm-tones.css
@@ -4,41 +4,41 @@
     /* NONE definitions to overwrite :root vars */
 
 
-  }
-  
-  #peregrine-app .theme-light {
+}
+
+#peregrine-app .theme-light {
     --bg-primary: #d7cec7;
     --bg-secondary: #dcc2a9;
-  
-    --text-primary-color:#581e1e;
+
+    --text-primary-color: #581e1e;
     --text-secondary-color: #654526;
-  
+
     --border-primary-color: #581e1e;
-  
+
     --link-primary-color: #654526;
     --link-primary-color-hover: #581e1e;
 
     --btn-primary-bg: #654526;
     --btn-primary-color: #d7cec7;
-  
+
     --figcaption-primary-bg: #ffffff99;
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: #565656;
     --bg-secondary: #654526;
-  
+
     --text-primary-color: #d7cec7;
     --text-secondary-color: #dcc2a9;
-  
+
     --border-primary-color: #d7cec7;
-  
+
     --link-primary-color: #d7cec7;
     --link-primary-color-hover: #dcc2a9;
 
     --btn-primary-bg: #d7cec7;
     --btn-primary-color: #654526;
-  
+
     --figcaption-primary-bg: #00000080;
-  }
+}
   
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/.content.xml
index 39c9dffdd..4bfa4b729 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/.content.xml
@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Page">
-    <jcr:content jcr:primaryType="per:PageContent" sling:resourceType="themecleanflex/components/page" jcr:title="palettes" template="/content/themecleanflex/templates" excludeFromSitemap="{Boolean}true">
-        <intro jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;This page has been left blank intentionally - it serves as the container.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child pages to customize the css palettes of this site.&lt;/p&gt;" />
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Page">
+    <jcr:content jcr:primaryType="per:PageContent" sling:resourceType="themecleanflex/components/page"
+                 jcr:title="palettes" template="/content/themecleanflex/templates" excludeFromSitemap="{Boolean}true">
+        <intro jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+               text="&lt;p&gt;This page has been left blank intentionally - it serves as the container.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child pages to customize the css palettes of this site.&lt;/p&gt;"/>
     </jcr:content>
 </jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/dawn.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/dawn.css
index f0d816201..05ce7fdd6 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/dawn.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/dawn.css
@@ -1,32 +1,32 @@
 /* purple rain palette */
 
 #peregrine-app {
-    --color-accent-1-900: #62319E;
-    --color-accent-1-800: #6F309A;
-    --color-accent-1-700: #7C2E96;
-    --color-accent-1-600: #882D92;
-    --color-accent-1-500: #A72B95;
-    --color-accent-1-400: #BB2881;
-    --color-accent-1-300: #D02261;
-    --color-accent-1-200: #DC5EBE;
-    --color-accent-1-100: #DEA1E9;
-    --color-accent-1-50: #EFEAF5;
-  
+    --color-accent-1-900: #62319e;
+    --color-accent-1-800: #6f309a;
+    --color-accent-1-700: #7c2e96;
+    --color-accent-1-600: #882d92;
+    --color-accent-1-500: #a72b95;
+    --color-accent-1-400: #bb2881;
+    --color-accent-1-300: #d02261;
+    --color-accent-1-200: #dc5ebe;
+    --color-accent-1-100: #dea1e9;
+    --color-accent-1-50: #efeaf5;
+
     --color-accent-2-100: #ffffff;
     --color-accent-2-200: #f8f8f8;
-  
+
     --dawn-gradient-1: linear-gradient(20deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-300);
     --dawn-gradient-1-hover: linear-gradient(20deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-600);
-  
+
     --bg-primary: var(--color-accent-2-100);
     --bg-secondary: var(--color-accent-2-200);
     --border-primary-color: rgba(66, 67, 68, 0.2);
-  
+
     --link-primary-color: var(--color-accent-1-500);
     --link-primary-color-hover: var(--color-accent-1-800);
-  
+
     --focus-border-color: var(--color-accent-1-500);
-  
+
     --btn-color: #ffffff;
     --btn-bg: var(--dawn-gradient-1);
     --btn-hover-color: #ffffff;
@@ -34,7 +34,7 @@
     --btn-focus-color: #ffffff;
     --btn-focus-bg: var(--btn-hover-bg);
     --btn-focus-border-color: var(--color-accent-1-300);
-  
+
     --btn-secondary-color: var(--color-accent-1-900);
     --btn-secondary-bg: var(--color-accent-1-50);
     --btn-secondary-border-width: 0;
@@ -43,26 +43,26 @@
     --btn-secondary-hover-bg: var(--color-accent-1-900);
     --btn-secondary-focus-color: var(--btn-secondary-hover-color);
     --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);
-  
+
     --btn-light-bg: var(--color-accent-1-300);
     --btn-light-color: #ffffff;
-  
+
     --btn-dark-bg: var(--color-accent-1-900);
     --btn-dark-color: #ffffff;
-  
-    --text-primary-color: rgba(0,0,0,0.87);
-    --text-secondary-color: rgba(0,0,0,0.6);
-  }
-  
-  #peregrine-app .theme-light {
+
+    --text-primary-color: rgba(0, 0, 0, 0.87);
+    --text-secondary-color: rgba(0, 0, 0, 0.6);
+}
+
+#peregrine-app .theme-light {
     --bg-primary: var(--color-accent-2-200);
     --bg-secondary: var(--dawn-gradient-1);
-  
-    --border-primary-color: rgba(0,0,0,0.1);
-  }
-  
-  #peregrine-app .theme-dark,
-  #peregrine-app .themecleanflex-components-cards.theme-light .card--bg {
+
+    --border-primary-color: rgba(0, 0, 0, 0.1);
+}
+
+#peregrine-app .theme-dark,
+#peregrine-app .themecleanflex-components-cards.theme-light .card--bg {
     --btn-color: var(--color-accent-1-500);
     --btn-bg: var(--color-accent-1-50);
     --btn-hover-color: var(--color-accent-1-900);
@@ -70,7 +70,7 @@
     --btn-focus-color: var(--btn-hover-color);
     --btn-focus-bg: var(--btn-hover-bg);
     --btn-focus-border-color: var(--color-accent-1-200);
-  
+
     --btn-primary-color: var(--btn-color);
     --btn-primary-bg: var(--btn-bg);
     --btn-primary-hover-color: var(--btn-hover-color);
@@ -78,45 +78,45 @@
     --btn-primary-focus-color: var(--btn-focus-color);
     --btn-primary-focus-bg: var(--btn-focus-bg);
     --btn-primary-focus-border-color: var(--btn-focus-border-color);
-  
+
     --btn-secondary-color: #ffffff;
     --btn-secondary-bg: transparent;
     --btn-secondary-border-width: 1px;
     --btn-secondary-border-color: #ffffff;
     --btn-secondary-hover-color: var(--btn-secondary-color);
     --btn-secondary-hover-bg: var(--color-accent-1-700);
-    --btn-secondary-hover-border-color: rgba(255,255,255,0);
+    --btn-secondary-hover-border-color: rgba(255, 255, 255, 0);
     --btn-secondary-focus-color: var(--btn-secondary-hover-color);
     --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);
     --btn-secondary-focus-border-color: var(--btn-focus-border-color);
-  }
-  
-  #peregrine-app .theme-dark {
+}
+
+#peregrine-app .theme-dark {
     --bg-primary: var(--dawn-gradient-1);
     --bg-secondary: #ffffff;
-  
-    --border-primary-color: rgba(255,255,255,0.6);
-  
-    --text-primary-color: rgba(255,255,255,0.87);
-    --text-secondary-color: rgba(255,255,255,0.6);
-  
+
+    --border-primary-color: rgba(255, 255, 255, 0.6);
+
+    --text-primary-color: rgba(255, 255, 255, 0.87);
+    --text-secondary-color: rgba(255, 255, 255, 0.6);
+
     --link-primary-color: #ffffff;
     --link-primary-color-hover: var(--color-accent-1-50);
     --focus-border-color: var(--color-accent-1-100);
-  }
-  
-  /* Individual overwrites */
-  
-  #peregrine-app [class$='components-cards'].theme-light .card--bg {
-    --text-primary-color: rgba(255,255,255,0.87);
-    --text-secondary-color: rgba(255,255,255,0.6);
-  }
-  
-  #peregrine-app [class$='components-cards'].theme-dark .card--bg,
-  #peregrine-app [class$='components-accordion'].theme-dark .accordion-container .bg-secondary {
-     /* Apply black text colour because otherwise it would render white on white */
-    --text-primary-color: rgba(0,0,0,0.87);
-    --text-secondary-color: rgba(0,0,0,0.6);
+}
+
+/* Individual overwrites */
+
+#peregrine-app [class$='components-cards'].theme-light .card--bg {
+    --text-primary-color: rgba(255, 255, 255, 0.87);
+    --text-secondary-color: rgba(255, 255, 255, 0.6);
+}
+
+#peregrine-app [class$='components-cards'].theme-dark .card--bg,
+#peregrine-app [class$='components-accordion'].theme-dark .accordion-container .bg-secondary {
+    /* Apply black text colour because otherwise it would render white on white */
+    --text-primary-color: rgba(0, 0, 0, 0.87);
+    --text-secondary-color: rgba(0, 0, 0, 0.6);
 
     --btn-color: #ffffff;
     --btn-bg: var(--dawn-gradient-1);
@@ -133,22 +133,22 @@
     --btn-primary-focus-color: var(--btn-focus-color);
     --btn-primary-focus-bg: var(--btn-focus-bg);
     --btn-primary-focus-border-color: var(--btn-focus-border-color);
-  }
-  
-  #peregrine-app [class$='components-accordion'].theme-light .accordion-container .bg-secondary {
-     /* Reduce strong visual noise by removing the default primary background colour */
-    --bg-secondary: rgba(255,255,255,0.6);
-  }
-  
-  #peregrine-app .theme-light .accordion-container.accordion-container,
-  #peregrine-app .theme-dark .accordion-container.accordion-container {
+}
+
+#peregrine-app [class$='components-accordion'].theme-light .accordion-container .bg-secondary {
+    /* Reduce strong visual noise by removing the default primary background colour */
+    --bg-secondary: rgba(255, 255, 255, 0.6);
+}
+
+#peregrine-app .theme-light .accordion-container.accordion-container,
+#peregrine-app .theme-dark .accordion-container.accordion-container {
     background: transparent;
-  }
-  
-  #peregrine-app [class$='components-quote'] {
+}
+
+#peregrine-app [class$='components-quote'] {
     --border-primary-color: var(--color-accent-1-700);
-  }
+}
 
-  #peregrine-app .theme-dark[class$="-components-navigation"] a:hover{
+#peregrine-app .theme-dark[class$="-components-navigation"] a:hover {
     color: var(--color-accent-1-700);
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/default.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/default.css
index c6787ec3a..f7ed1f410 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/default.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/default.css
@@ -1,119 +1,119 @@
 /* default palette */
 
 #peregrine-app {
-  --color-accent-1-900: #000653;
-  --color-accent-1-800: #001477;
-  --color-accent-1-700: #00289B;
-  --color-accent-1-600: #0042BF;
-  --color-accent-1-500: #054CC6;
-  --color-accent-1-400: #186DDB;
-  --color-accent-1-300: #237EE5;
-  --color-accent-1-200: #5198EC;
-  --color-accent-1-100: #81B4F2;
-  --color-accent-1-50: #E8F2FF;
-
-  --color-accent-2-100: #ffffff;
-  --color-accent-2-200: #f2f2f2;
-
-  --color-accent-3-800: #191919;
-  --color-accent-3-900: #000000;
-
-  --bg-primary: var(--color-accent-2-100);
-  --bg-secondary: var(--color-accent-2-200);
-  --border-primary-color: rgba(66, 67, 68, 0.2);
-
-  --link-primary-color: var(--color-accent-1-500);
-  --link-primary-color-hover: var(--color-accent-1-800);
-
-  --focus-border-color: var(--color-accent-1-500);
-
-  --btn-color: #ffffff;
-  --btn-bg: var(--color-accent-3-900);
-  --btn-hover-color: #ffffff;
-  --btn-hover-bg: var(--color-accent-3-800);
-  --btn-focus-color: #ffffff;
-  --btn-focus-bg: var(--color-accent-3-800);
-  --btn-focus-border-color: var(--color-accent-1-300);
-
-  --btn-secondary-color: var(--color-accent-3-900);
-  --btn-secondary-bg: #ffffff;
-  --btn-secondary-border-width: 1px;
-  --btn-secondary-border-color: var(--color-accent-3-900);
-  --btn-secondary-hover-color: var(--btn-secondary-color);
-  --btn-secondary-hover-bg: #dddcdc;
-  --btn-secondary-focus-color: #ffffff;
-  --btn-secondary-focus-bg: var(--color-accent-3-800);
-
-  --btn-light-bg: var(--color-accent-1-200);
-  --btn-light-hover-bg: var(--color-accent-1-300);
-  --btn-light-hover-color: var(--color-accent-1-900);
-
-  --btn-dark-bg: var(--color-accent-1-600);
-  --btn-dark-hover-bg: var(--color-accent-1-700);
-
-  --text-primary-color: rgba(0,0,0,0.87);
-  --text-secondary-color: rgba(0,0,0,0.6);
+    --color-accent-1-900: #000653;
+    --color-accent-1-800: #001477;
+    --color-accent-1-700: #00289b;
+    --color-accent-1-600: #0042bf;
+    --color-accent-1-500: #054cc6;
+    --color-accent-1-400: #186ddb;
+    --color-accent-1-300: #237ee5;
+    --color-accent-1-200: #5198ec;
+    --color-accent-1-100: #81b4f2;
+    --color-accent-1-50: #e8f2ff;
+
+    --color-accent-2-100: #ffffff;
+    --color-accent-2-200: #f2f2f2;
+
+    --color-accent-3-800: #191919;
+    --color-accent-3-900: #000000;
+
+    --bg-primary: var(--color-accent-2-100);
+    --bg-secondary: var(--color-accent-2-200);
+    --border-primary-color: rgba(66, 67, 68, 0.2);
+
+    --link-primary-color: var(--color-accent-1-500);
+    --link-primary-color-hover: var(--color-accent-1-800);
+
+    --focus-border-color: var(--color-accent-1-500);
+
+    --btn-color: #ffffff;
+    --btn-bg: var(--color-accent-3-900);
+    --btn-hover-color: #ffffff;
+    --btn-hover-bg: var(--color-accent-3-800);
+    --btn-focus-color: #ffffff;
+    --btn-focus-bg: var(--color-accent-3-800);
+    --btn-focus-border-color: var(--color-accent-1-300);
+
+    --btn-secondary-color: var(--color-accent-3-900);
+    --btn-secondary-bg: #ffffff;
+    --btn-secondary-border-width: 1px;
+    --btn-secondary-border-color: var(--color-accent-3-900);
+    --btn-secondary-hover-color: var(--btn-secondary-color);
+    --btn-secondary-hover-bg: #dddcdc;
+    --btn-secondary-focus-color: #ffffff;
+    --btn-secondary-focus-bg: var(--color-accent-3-800);
+
+    --btn-light-bg: var(--color-accent-1-200);
+    --btn-light-hover-bg: var(--color-accent-1-300);
+    --btn-light-hover-color: var(--color-accent-1-900);
+
+    --btn-dark-bg: var(--color-accent-1-600);
+    --btn-dark-hover-bg: var(--color-accent-1-700);
+
+    --text-primary-color: rgba(0, 0, 0, 0.87);
+    --text-secondary-color: rgba(0, 0, 0, 0.6);
 }
 
 #peregrine-app .theme-light {
-  --bg-primary: var(--color-accent-2-200);
-  --bg-secondary: var(--color-accent-2-100);
-  
-  --btn-secondary-color: var(--color-accent-1-900);
-  --btn-secondary-bg: var(--bg-secondary);
-  --btn-secondary-border-width: 0;
-  --btn-secondary-hover-color: var(--btn-secondary-color);
-  --btn-secondary-hover-bg: var(--color-accent-1-300);
-  --btn-secondary-focus-color: var(--btn-secondary-color);
-  --btn-secondary-focus-bg: var(--color-accent-1-300);
-  
-  --link-primary-color: var(--text-primary-color);
-  --link-primary-color-hover: #000000;
-
-  --figcaption-primary-bg: #ffffff99;
+    --bg-primary: var(--color-accent-2-200);
+    --bg-secondary: var(--color-accent-2-100);
+
+    --btn-secondary-color: var(--color-accent-1-900);
+    --btn-secondary-bg: var(--bg-secondary);
+    --btn-secondary-border-width: 0;
+    --btn-secondary-hover-color: var(--btn-secondary-color);
+    --btn-secondary-hover-bg: var(--color-accent-1-300);
+    --btn-secondary-focus-color: var(--btn-secondary-color);
+    --btn-secondary-focus-bg: var(--color-accent-1-300);
+
+    --link-primary-color: var(--text-primary-color);
+    --link-primary-color-hover: #000000;
+
+    --figcaption-primary-bg: #ffffff99;
 }
 
 #peregrine-app .theme-dark {
-  --bg-primary: var(--color-accent-3-900);
-  --bg-secondary: var(--color-accent-3-800);
-  --border-primary-color: rgba(255, 255, 255, 0.2);
-
-  --link-primary-color: var(--color-accent-1-200);
-  --link-primary-color-hover: var(--color-accent-1-100);
-
-  --text-primary-color: #ffffff;
-  --text-secondary-color: rgba(255,255,255,0.6);
-
-  --btn-focus-border-color: #ffffff;
-
-  --btn-color: var(--color-accent-3-900);
-  --btn-bg: #ffffff;
-  --btn-hover-color: #ffffff;
-  --btn-hover-bg: var(--color-accent-3-800);
-  --btn-focus-color: var(--color-accent-3-800);
-  --btn-focus-bg: #e4e4e4;
-  --btn-focus-border-color: var(--color-accent-1-500);
-
-  --btn-primary-color: var(--btn-color);
-  --btn-primary-bg: var(--btn-bg);
-  --btn-primary-hover-color: var(--btn-hover-color);
-  --btn-primary-hover-bg: var(--btn-hover-bg);
-  --btn-primary-focus-color: var(--btn-focus-color);
-  --btn-primary-focus-bg: var(--btn-focus-bg);
-  --btn-primary-focus-border-color: var(--btn-focus-border-color);
-
-  --btn-secondary-bg: var(--color-accent-3-900);
-  --btn-secondary-color: #ffffff;
-  --btn-secondary-border-width: 1px;
-  --btn-secondary-border-color: #ffffff;
-  --btn-secondary-hover-color: #ffffff;
-  --btn-secondary-hover-bg: var(--color-accent-3-800);
-  --btn-secondary-focus-color: #ffffff;
-  --btn-secondary-focus-bg: var(--color-accent-3-800);
-
-/*   --link-primary-color: var(--text-primary-color);
-  --link-primary-color-hover: #ffffff; */
- 
-
-  --figcaption-primary-bg: #00000080;
+    --bg-primary: var(--color-accent-3-900);
+    --bg-secondary: var(--color-accent-3-800);
+    --border-primary-color: rgba(255, 255, 255, 0.2);
+
+    --link-primary-color: var(--color-accent-1-200);
+    --link-primary-color-hover: var(--color-accent-1-100);
+
+    --text-primary-color: #ffffff;
+    --text-secondary-color: rgba(255, 255, 255, 0.6);
+
+    --btn-focus-border-color: #ffffff;
+
+    --btn-color: var(--color-accent-3-900);
+    --btn-bg: #ffffff;
+    --btn-hover-color: #ffffff;
+    --btn-hover-bg: var(--color-accent-3-800);
+    --btn-focus-color: var(--color-accent-3-800);
+    --btn-focus-bg: #e4e4e4;
+    --btn-focus-border-color: var(--color-accent-1-500);
+
+    --btn-primary-color: var(--btn-color);
+    --btn-primary-bg: var(--btn-bg);
+    --btn-primary-hover-color: var(--btn-hover-color);
+    --btn-primary-hover-bg: var(--btn-hover-bg);
+    --btn-primary-focus-color: var(--btn-focus-color);
+    --btn-primary-focus-bg: var(--btn-focus-bg);
+    --btn-primary-focus-border-color: var(--btn-focus-border-color);
+
+    --btn-secondary-bg: var(--color-accent-3-900);
+    --btn-secondary-color: #ffffff;
+    --btn-secondary-border-width: 1px;
+    --btn-secondary-border-color: #ffffff;
+    --btn-secondary-hover-color: #ffffff;
+    --btn-secondary-hover-bg: var(--color-accent-3-800);
+    --btn-secondary-focus-color: #ffffff;
+    --btn-secondary-focus-bg: var(--color-accent-3-800);
+
+    /*   --link-primary-color: var(--text-primary-color);
+      --link-primary-color-hover: #ffffff; */
+
+
+    --figcaption-primary-bg: #00000080;
 }
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/ocean.css b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/ocean.css
index 748880faf..80b77f874 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/ocean.css
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/css/palettes/ocean.css
@@ -1,138 +1,138 @@
 /* ocean palette */
 
 #peregrine-app {
-  --color-accent-1-900: #000653;
-  --color-accent-1-800: #001477;
-  --color-accent-1-700: #00289B;
-  --color-accent-1-600: #0042BF;
-  --color-accent-1-500: #054CC6;
-  --color-accent-1-400: #186DDB;
-  --color-accent-1-300: #237EE5;
-  --color-accent-1-200: #5198EC;
-  --color-accent-1-100: #81B4F2;
-  --color-accent-1-50: #E8F2FF;
-
-  --color-accent-2-100: #ffffff;
-  --color-accent-2-200: #f2f2f2;
-
-  --ocean-gradient-1: linear-gradient(-10deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-300);
-  --ocean-gradient-1-hover: linear-gradient(-10deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-600);
-
-  --bg-primary: var(--color-accent-2-100);
-  --bg-secondary: var(--color-accent-1-50);
-  --border-primary-color: rgba(66, 67, 68, 0.2);
-
-  --link-primary-color: var(--color-accent-1-500);
-  --link-primary-color-hover: var(--color-accent-1-800);
-
-  --focus-border-color: var(--color-accent-1-500);
-
-  --btn-color: #ffffff;
-  --btn-bg: var(--ocean-gradient-1);
-  --btn-hover-color: #ffffff;
-  --btn-hover-bg: var(--ocean-gradient-1-hover);
-  --btn-focus-color: #ffffff;
-  --btn-focus-bg: var(--btn-hover-bg);
-  --btn-focus-border-color: var(--color-accent-1-300);
-
-  --btn-secondary-color: var(--color-accent-1-500);
-  --btn-secondary-bg: var(--color-accent-1-50);
-  --btn-secondary-border-width: 0;
-  --btn-secondary-border-color: transparent;
-  --btn-secondary-hover-color: var(--color-accent-1-800);
-  --btn-secondary-hover-bg: var(--color-accent-1-100);
-  --btn-secondary-focus-color: var(--btn-secondary-hover-color);
-  --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);
-
-  --btn-light-bg: var(--color-accent-1-200);
-  --btn-light-color: var(--color-accent-1-900);
-
-  --btn-dark-bg: var(--color-accent-1-900);
-  --btn-dark-color: #ffffff;
-
-  --text-primary-color: rgba(0,0,0,0.87);
-  --text-secondary-color: rgba(0,0,0,0.6);
+    --color-accent-1-900: #000653;
+    --color-accent-1-800: #001477;
+    --color-accent-1-700: #00289b;
+    --color-accent-1-600: #0042bf;
+    --color-accent-1-500: #054cc6;
+    --color-accent-1-400: #186ddb;
+    --color-accent-1-300: #237ee5;
+    --color-accent-1-200: #5198ec;
+    --color-accent-1-100: #81b4f2;
+    --color-accent-1-50: #e8f2ff;
+
+    --color-accent-2-100: #ffffff;
+    --color-accent-2-200: #f2f2f2;
+
+    --ocean-gradient-1: linear-gradient(-10deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-300);
+    --ocean-gradient-1-hover: linear-gradient(-10deg, var(--color-accent-1-600) 0%, transparent 100%) var(--color-accent-1-600);
+
+    --bg-primary: var(--color-accent-2-100);
+    --bg-secondary: var(--color-accent-1-50);
+    --border-primary-color: rgba(66, 67, 68, 0.2);
+
+    --link-primary-color: var(--color-accent-1-500);
+    --link-primary-color-hover: var(--color-accent-1-800);
+
+    --focus-border-color: var(--color-accent-1-500);
+
+    --btn-color: #ffffff;
+    --btn-bg: var(--ocean-gradient-1);
+    --btn-hover-color: #ffffff;
+    --btn-hover-bg: var(--ocean-gradient-1-hover);
+    --btn-focus-color: #ffffff;
+    --btn-focus-bg: var(--btn-hover-bg);
+    --btn-focus-border-color: var(--color-accent-1-300);
+
+    --btn-secondary-color: var(--color-accent-1-500);
+    --btn-secondary-bg: var(--color-accent-1-50);
+    --btn-secondary-border-width: 0;
+    --btn-secondary-border-color: transparent;
+    --btn-secondary-hover-color: var(--color-accent-1-800);
+    --btn-secondary-hover-bg: var(--color-accent-1-100);
+    --btn-secondary-focus-color: var(--btn-secondary-hover-color);
+    --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);
+
+    --btn-light-bg: var(--color-accent-1-200);
+    --btn-light-color: var(--color-accent-1-900);
+
+    --btn-dark-bg: var(--color-accent-1-900);
+    --btn-dark-color: #ffffff;
+
+    --text-primary-color: rgba(0, 0, 0, 0.87);
+    --text-secondary-color: rgba(0, 0, 0, 0.6);
 }
 
 #peregrine-app .theme-light {
-  --bg-primary: var(--color-accent-1-50);
-  --bg-secondary: var(--ocean-gradient-1);
+    --bg-primary: var(--color-accent-1-50);
+    --bg-secondary: var(--ocean-gradient-1);
 
-  --border-primary-color: rgba(0,0,0,0.1);
+    --border-primary-color: rgba(0, 0, 0, 0.1);
 }
 
 #peregrine-app .theme-dark,
 #peregrine-app .themecleanflex-components-cards.theme-light .card--bg {
-  --btn-color: var(--color-accent-1-500);
-  --btn-bg: var(--color-accent-1-50);
-  --btn-hover-color: var(--color-accent-1-900);
-  --btn-hover-bg: var(--color-accent-1-100);
-  --btn-focus-color: var(--btn-hover-color);
-  --btn-focus-bg: var(--btn-hover-bg);
-  --btn-focus-border-color: var(--color-accent-1-200);
-
-  --btn-primary-color: var(--btn-color);
-  --btn-primary-bg: var(--btn-bg);
-  --btn-primary-hover-color: var(--btn-hover-color);
-  --btn-primary-hover-bg: var(--btn-hover-bg);
-  --btn-primary-focus-color: var(--btn-focus-color);
-  --btn-primary-focus-bg: var(--btn-focus-bg);
-  --btn-primary-focus-border-color: var(--btn-focus-border-color);
-
-  --btn-secondary-color: #ffffff;
-  --btn-secondary-bg: transparent;
-  --btn-secondary-border-width: 1px;
-  --btn-secondary-border-color: #ffffff;
-  --btn-secondary-hover-color: var(--btn-secondary-color);
-  --btn-secondary-hover-bg: var(--color-accent-1-700);
-  --btn-secondary-hover-border-color: rgba(255,255,255,0);
-  --btn-secondary-focus-color: var(--btn-secondary-hover-color);
-  --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);
-  --btn-secondary-focus-border-color: var(--btn-focus-border-color);
+    --btn-color: var(--color-accent-1-500);
+    --btn-bg: var(--color-accent-1-50);
+    --btn-hover-color: var(--color-accent-1-900);
+    --btn-hover-bg: var(--color-accent-1-100);
+    --btn-focus-color: var(--btn-hover-color);
+    --btn-focus-bg: var(--btn-hover-bg);
+    --btn-focus-border-color: var(--color-accent-1-200);
+
+    --btn-primary-color: var(--btn-color);
+    --btn-primary-bg: var(--btn-bg);
+    --btn-primary-hover-color: var(--btn-hover-color);
+    --btn-primary-hover-bg: var(--btn-hover-bg);
+    --btn-primary-focus-color: var(--btn-focus-color);
+    --btn-primary-focus-bg: var(--btn-focus-bg);
+    --btn-primary-focus-border-color: var(--btn-focus-border-color);
+
+    --btn-secondary-color: #ffffff;
+    --btn-secondary-bg: transparent;
+    --btn-secondary-border-width: 1px;
+    --btn-secondary-border-color: #ffffff;
+    --btn-secondary-hover-color: var(--btn-secondary-color);
+    --btn-secondary-hover-bg: var(--color-accent-1-700);
+    --btn-secondary-hover-border-color: rgba(255, 255, 255, 0);
+    --btn-secondary-focus-color: var(--btn-secondary-hover-color);
+    --btn-secondary-focus-bg: var(--btn-secondary-hover-bg);
+    --btn-secondary-focus-border-color: var(--btn-focus-border-color);
 }
 
 #peregrine-app .theme-dark {
-  --bg-primary: var(--ocean-gradient-1);
-  --bg-secondary: #ffffff;
+    --bg-primary: var(--ocean-gradient-1);
+    --bg-secondary: #ffffff;
 
-  --border-primary-color: rgba(255,255,255,0.6);
+    --border-primary-color: rgba(255, 255, 255, 0.6);
 
-  --text-primary-color: rgba(255,255,255,0.87);
-  --text-secondary-color: rgba(255,255,255,0.6);
+    --text-primary-color: rgba(255, 255, 255, 0.87);
+    --text-secondary-color: rgba(255, 255, 255, 0.6);
 
-  --link-primary-color: #ffffff;
-  --link-primary-color-hover: var(--color-accent-1-50);
-  --focus-border-color: var(--color-accent-1-100);
+    --link-primary-color: #ffffff;
+    --link-primary-color-hover: var(--color-accent-1-50);
+    --focus-border-color: var(--color-accent-1-100);
 }
 
 /* Individual overwrites */
 
 #peregrine-app [class$='components-cards'].theme-light .card--bg {
-  --text-primary-color: rgba(255,255,255,0.87);
-  --text-secondary-color: rgba(255,255,255,0.6);
+    --text-primary-color: rgba(255, 255, 255, 0.87);
+    --text-secondary-color: rgba(255, 255, 255, 0.6);
 }
 
 #peregrine-app [class$='components-cards'].theme-dark .card--bg,
 #peregrine-app [class$='components-accordion'].theme-dark .accordion-container .bg-secondary {
-   /* Apply black text colour because otherwise it would render white on white */
-  --text-primary-color: rgba(0,0,0,0.87);
-  --text-secondary-color: rgba(0,0,0,0.6);
+    /* Apply black text colour because otherwise it would render white on white */
+    --text-primary-color: rgba(0, 0, 0, 0.87);
+    --text-secondary-color: rgba(0, 0, 0, 0.6);
 }
 
 #peregrine-app [class$='components-accordion'].theme-light .accordion-container .bg-secondary {
-   /* Reduce strong visual noise by removing the default primary background colour */
-  --bg-secondary: rgba(255,255,255,0.6);
+    /* Reduce strong visual noise by removing the default primary background colour */
+    --bg-secondary: rgba(255, 255, 255, 0.6);
 }
 
 #peregrine-app .theme-light .accordion-container.accordion-container,
 #peregrine-app .theme-dark .accordion-container.accordion-container {
-  background: transparent;
+    background: transparent;
 }
 
 #peregrine-app [class$='components-quote'] {
-  --border-primary-color: var(--color-accent-1-700);
+    --border-primary-color: var(--color-accent-1-700);
 }
 
-#peregrine-app .theme-dark[class$="-components-navigation"] a:hover{
-  color: var(--color-accent-1-700);
+#peregrine-app .theme-dark[class$="-components-navigation"] a:hover {
+    color: var(--color-accent-1-700);
 }
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/.content.xml
index 6d77083ce..2e6774bfc 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2019-05-06T21:14:05.790Z"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2019-05-06T21:14:05.790Z"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2019-05-06T21:15:41.195Z"
         jcr:lastModifiedBy="admin"
@@ -17,8 +18,10 @@
         excludeTreeFromSitemap="{Boolean}true">
         <nebf8e89b-7765-4d9c-9e19-bff3f4d03a7b jcr:primaryType="nt:unstructured">
             <n764b8eef-0b83-434a-94dd-c03d6da81778 jcr:primaryType="nt:unstructured">
-                <text   jcr:primaryType="nt:unstructured" htmlelement="section" sling:resourceType="themecleanflex/components/richtext" 
-                        text="&lt;h1 style=&quot;text-align: center; &quot;>error pages&lt;/h1>" bottompadding="156" toppadding="156" videosrc="">
+                <text jcr:primaryType="nt:unstructured" htmlelement="section"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      text="&lt;h1 style=&quot;text-align: center; &quot;>error pages&lt;/h1>" bottompadding="156"
+                      toppadding="156" videosrc="">
                 </text>
             </n764b8eef-0b83-434a-94dd-c03d6da81778>
         </nebf8e89b-7765-4d9c-9e19-bff3f4d03a7b>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/404/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/404/.content.xml
index 55615c7ed..2d3c2c639 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/404/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/errors/404/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2019-05-06T21:14:05.790Z"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2019-05-06T21:14:05.790Z"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2019-05-06T21:15:41.195Z"
         jcr:lastModifiedBy="admin"
@@ -15,8 +16,10 @@
         templatePath="/content/themecleanflex/templates">
         <nebf8e89b-7765-4d9c-9e19-bff3f4d03a7b jcr:primaryType="nt:unstructured">
             <n764b8eef-0b83-434a-94dd-c03d6da81778 jcr:primaryType="nt:unstructured">
-                <text   jcr:primaryType="nt:unstructured" htmlelement="section" sling:resourceType="themecleanflex/components/richtext" 
-                        text="&lt;h1 style=&quot;text-align: center; &quot;>404 - Sorry, the requested page was not found&lt;/h1>" bottompadding="156" toppadding="156" videosrc="">
+                <text jcr:primaryType="nt:unstructured" htmlelement="section"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      text="&lt;h1 style=&quot;text-align: center; &quot;>404 - Sorry, the requested page was not found&lt;/h1>"
+                      bottompadding="156" toppadding="156" videosrc="">
                 </text>
             </n764b8eef-0b83-434a-94dd-c03d6da81778>
         </nebf8e89b-7765-4d9c-9e19-bff3f4d03a7b>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/index/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/index/.content.xml
index b881d67cb..92d62f83c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/index/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/index/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2019-05-06T21:14:05.790Z"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2019-05-06T21:14:05.790Z"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-14T05:44:40.591-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/.content.xml
index 5c7a9d123..68e019937 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/.content.xml
@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Page" jcr:title="JavaScript files" jcr:description="JavaScript files">
-    <jcr:content jcr:primaryType="per:PageContent" sling:resourceType="themecleanflex/components/page" jcr:title="js" template="/content/themecleanflex/templates" excludeFromSitemap="{Boolean}true" excludeTreeFromSitemap="{Boolean}true">
-        <intro jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;This page has been left blank intentionally - it serves as the container.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child pages to customize/add javascript files for this site.&lt;/p&gt;" />
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Page" jcr:title="JavaScript files"
+          jcr:description="JavaScript files">
+    <jcr:content jcr:primaryType="per:PageContent" sling:resourceType="themecleanflex/components/page" jcr:title="js"
+                 template="/content/themecleanflex/templates" excludeFromSitemap="{Boolean}true"
+                 excludeTreeFromSitemap="{Boolean}true">
+        <intro jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+               text="&lt;p&gt;This page has been left blank intentionally - it serves as the container.&amp;nbsp;&lt;/p&gt;&lt;p&gt;Please edit the child pages to customize/add javascript files for this site.&lt;/p&gt;"/>
     </jcr:content>
 </jcr:root>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/site-analytics.js b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/site-analytics.js
index 193b31629..9286d8a8c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/site-analytics.js
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/js/site-analytics.js
@@ -2,15 +2,17 @@ var Analytics = _analytics.init({
     app: 'YOUR-SITE',
     plugins: [
         {
-          name: 'console-plugin',
-          track: ({ payload}) => { console.log(payload) }
+            name: 'console-plugin',
+            track: ({ payload }) => {
+                console.log(payload);
+            },
         },
         analyticsPerfumeJs({
             perfume: Perfume,
-            category: 'perfMetrics'
+            category: 'perfMetrics',
         }),
         analyticsGa.init({
-           trackingId: 'YOUR-GOOGLE-TRACKING-ID'    
-        })
-    ]
- })
+            trackingId: 'YOUR-GOOGLE-TRACKING-ID',
+        }),
+    ],
+});
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/.content.xml
index 3105e0036..49a34905d 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/.content.xml
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | component library"
-            doNotCopy="{Boolean}true"
-            jcr:description="component library themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | component library"
+          doNotCopy="{Boolean}true"
+          jcr:description="component library themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -14,358 +15,378 @@
         excludeFromSitemap="{Boolean}true"
         excludeTreeFromSitemap="{Boolean}true"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container32
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container32
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            <title1 jcr:primaryType="nt:unstructured" 
-    sling:resourceType="themecleanflex/components/richtext" 
-    text="&lt;h1&gt;component library&lt;/h1&gt;">
-</title1><cards2
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/cards"
-            bgcolor="#ffffff" bottompadding="20"
-            showbutton="true"
-            showtext="true"
-            showtitle="false"
-            showcard="true"
-            toppadding="20"
-            cardsperrow="4"
-            customcardcolor="true"
-            cardcolor="#eeeeee">
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    text="&lt;h1&gt;component library&lt;/h1&gt;">
+            </title1>
+            <cards2
+                jcr:primaryType="nt:unstructured"
+                sling:resourceType="themecleanflex/components/cards"
+                bgcolor="#ffffff" bottompadding="20"
+                showbutton="true"
+                showtext="true"
+                showtitle="false"
+                showcard="true"
+                toppadding="20"
+                cardsperrow="4"
+                customcardcolor="true"
+                cardcolor="#eeeeee">
                 <cards jcr:primaryType="nt:unstructured">
                     <card3
-        jcr:primaryType="nt:unstructured"
-        buttontext="See accordion"
-        buttonlink="library/accordion.html"
-        buttoncolor="primary"
-        title="accordion"
-        text="&lt;h3 id=&quot;toggleaccordion&quot;&gt;Toggle/Accordion&lt;/h3&gt;
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See accordion"
+                        buttonlink="library/accordion.html"
+                        buttoncolor="primary"
+                        title="accordion"
+                        text="&lt;h3 id=&quot;toggleaccordion&quot;&gt;Toggle/Accordion&lt;/h3&gt;
 &lt;p&gt;Contains a list of items that expand when clicked on allowing you to hide content that is not immediately relevant to the user.&lt;/p&gt;
 ">
-        </card3>
-    <card4
-        jcr:primaryType="nt:unstructured"
-        buttontext="See block"
-        buttonlink="library/block.html"
-        buttoncolor="primary"
-        title="block"
-        text="&lt;h3 id=&quot;block&quot;&gt;Block&lt;/h3&gt;
+                    </card3>
+                    <card4
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See block"
+                        buttonlink="library/block.html"
+                        buttoncolor="primary"
+                        title="block"
+                        text="&lt;h3 id=&quot;block&quot;&gt;Block&lt;/h3&gt;
 &lt;p&gt;The basic building block of the theme. Pages can be built quickly by vertically stacking blocks with different content. Blocks have many options for changing background settings to add visual variety to your pages.&lt;/p&gt;
 ">
-        </card4>
-    <card5
-        jcr:primaryType="nt:unstructured"
-        buttontext="See breadcrumb"
-        buttonlink="library/breadcrumb.html"
-        buttoncolor="primary"
-        title="breadcrumb"
-        text="&lt;h3 id=&quot;breadcrumb&quot;&gt;Breadcrumb&lt;/h3&gt;
+                    </card4>
+                    <card5
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See breadcrumb"
+                        buttonlink="library/breadcrumb.html"
+                        buttoncolor="primary"
+                        title="breadcrumb"
+                        text="&lt;h3 id=&quot;breadcrumb&quot;&gt;Breadcrumb&lt;/h3&gt;
 &lt;p&gt;The breadcrumb component displays the current route in the site with links to quickly navigate back up to parent pages.&lt;/p&gt;
 ">
-        </card5>
-    <card6
-        jcr:primaryType="nt:unstructured"
-        buttontext="See cards"
-        buttonlink="library/cards.html"
-        buttoncolor="primary"
-        title="cards"
-        text="&lt;h3 id=&quot;cards&quot;&gt;Cards&lt;/h3&gt;
+                    </card5>
+                    <card6
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See cards"
+                        buttonlink="library/cards.html"
+                        buttoncolor="primary"
+                        title="cards"
+                        text="&lt;h3 id=&quot;cards&quot;&gt;Cards&lt;/h3&gt;
 &lt;p&gt;Cards are used for displaying small bits of information in visually distinct boxes with an optional image and link.&lt;/p&gt;
 ">
-        </card6>
-    <card7
-        jcr:primaryType="nt:unstructured"
-        buttontext="See carousel"
-        buttonlink="library/carousel.html"
-        buttoncolor="primary"
-        title="carousel"
-        text="&lt;h3 id=&quot;carousel&quot;&gt;Carousel&lt;/h3&gt;
+                    </card6>
+                    <card7
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See carousel"
+                        buttonlink="library/carousel.html"
+                        buttoncolor="primary"
+                        title="carousel"
+                        text="&lt;h3 id=&quot;carousel&quot;&gt;Carousel&lt;/h3&gt;
 &lt;p&gt;The Carousel components is used for displaying a slideshow of images.&lt;/p&gt;
 ">
-        </card7>
-    <card8
-        jcr:primaryType="nt:unstructured"
-        buttontext="See code"
-        buttonlink="library/code.html"
-        buttoncolor="primary"
-        title="code"
-        text="&lt;h3 id=&quot;code&quot;&gt;Code&lt;/h3&gt;
+                    </card7>
+                    <card8
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See code"
+                        buttonlink="library/code.html"
+                        buttoncolor="primary"
+                        title="code"
+                        text="&lt;h3 id=&quot;code&quot;&gt;Code&lt;/h3&gt;
 &lt;p&gt;This component renders the text as &lt;code&gt;&amp;lt;pre&amp;gt;&amp;lt;code class=&amp;quot;language-{{language}} {{classes}}&amp;quot;&amp;gt;{{text}}&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;&lt;/code&gt;&lt;/p&gt;
 &lt;p&gt;If the base template includes prism.js it will be used to generate the markup of the code. &lt;/p&gt;
 ">
-        </card8>
-    <card9
-        jcr:primaryType="nt:unstructured"
-        buttontext="See container"
-        buttonlink="library/container.html"
-        buttoncolor="primary"
-        title="container"
-        text="&lt;h3 id=&quot;container&quot;&gt;Container&lt;/h3&gt;
+                    </card8>
+                    <card9
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See container"
+                        buttonlink="library/container.html"
+                        buttoncolor="primary"
+                        title="container"
+                        text="&lt;h3 id=&quot;container&quot;&gt;Container&lt;/h3&gt;
 &lt;p&gt;The container component is used by Peregrine cms to allow components to be dragged onto other components&lt;/p&gt;
 ">
-        </card9>
-    <card10
-        jcr:primaryType="nt:unstructured"
-        buttontext="See containerblock"
-        buttonlink="library/containerblock.html"
-        buttoncolor="primary"
-        title="containerblock"
-        text="&lt;h3 id=&quot;container-block&quot;&gt;Container Block&lt;/h3&gt;
+                    </card9>
+                    <card10
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See containerblock"
+                        buttonlink="library/containerblock.html"
+                        buttoncolor="primary"
+                        title="containerblock"
+                        text="&lt;h3 id=&quot;container-block&quot;&gt;Container Block&lt;/h3&gt;
 &lt;p&gt;The Container Block component is an empty block component that can be used with the nested containers as columns for finer control of layout.&lt;/p&gt;
 ">
-        </card10>
-    <card11
-        jcr:primaryType="nt:unstructured"
-        buttontext="See footer"
-        buttonlink="library/footer.html"
-        buttoncolor="primary"
-        title="footer"
-        text="&lt;h3 id=&quot;footer&quot;&gt;Footer&lt;/h3&gt;
+                    </card10>
+                    <card11
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See footer"
+                        buttonlink="library/footer.html"
+                        buttoncolor="primary"
+                        title="footer"
+                        text="&lt;h3 id=&quot;footer&quot;&gt;Footer&lt;/h3&gt;
 &lt;p&gt;The Footer component is a great way to display extra information or navigation related to your site.&lt;/p&gt;
 ">
-        </card11>
-    <card12
-        jcr:primaryType="nt:unstructured"
-        buttontext="See header"
-        buttonlink="library/header.html"
-        buttoncolor="primary"
-        title="header"
-        text="&lt;h3 id=&quot;header&quot;&gt;Header&lt;/h3&gt;
+                    </card11>
+                    <card12
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See header"
+                        buttonlink="library/header.html"
+                        buttoncolor="primary"
+                        title="header"
+                        text="&lt;h3 id=&quot;header&quot;&gt;Header&lt;/h3&gt;
 &lt;p&gt;The Header component is used to display your logo and the main navigation section for your page. &lt;/p&gt;
 ">
-        </card12>
-    <card13
-        jcr:primaryType="nt:unstructured"
-        buttontext="See media"
-        buttonlink="library/media.html"
-        buttoncolor="primary"
-        title="media"
-        text="&lt;h3 id=&quot;media&quot;&gt;Media&lt;/h3&gt;
+                    </card12>
+                    <card13
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See media"
+                        buttonlink="library/media.html"
+                        buttoncolor="primary"
+                        title="media"
+                        text="&lt;h3 id=&quot;media&quot;&gt;Media&lt;/h3&gt;
 &lt;p&gt;The Media component can be used to embed images or video within your components.&lt;/p&gt;
 ">
-        </card13>
-    <card14
-        jcr:primaryType="nt:unstructured"
-        buttontext="See mediablock"
-        buttonlink="library/mediablock.html"
-        buttoncolor="primary"
-        title="mediablock"
-        text="&lt;h3 id=&quot;media-block&quot;&gt;Media Block&lt;/h3&gt;
+                    </card13>
+                    <card14
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See mediablock"
+                        buttonlink="library/mediablock.html"
+                        buttoncolor="primary"
+                        title="mediablock"
+                        text="&lt;h3 id=&quot;media-block&quot;&gt;Media Block&lt;/h3&gt;
 &lt;p&gt;The Media Block component is a simple Block that embeds a video or image.&lt;/p&gt;
 ">
-        </card14>
-    <card15
-        jcr:primaryType="nt:unstructured"
-        buttontext="See mediavisible"
-        buttonlink="library/mediavisible.html"
-        buttoncolor="primary"
-        title="mediavisible"
-        text="&lt;h3 id=&quot;media-visible&quot;&gt;Media Visible&lt;/h3&gt;
+                    </card14>
+                    <card15
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See mediavisible"
+                        buttonlink="library/mediavisible.html"
+                        buttoncolor="primary"
+                        title="mediavisible"
+                        text="&lt;h3 id=&quot;media-visible&quot;&gt;Media Visible&lt;/h3&gt;
 &lt;p&gt;The Media Visible component is a variation of the regular media component with dialog options that will be hidden when the embedding component does not display any media.&lt;/p&gt;
 ">
-        </card15>
-    <card16
-        jcr:primaryType="nt:unstructured"
-        buttontext="See menubuttons"
-        buttonlink="library/menubuttons.html"
-        buttoncolor="primary"
-        title="menubuttons"
-        text="&lt;h3 id=&quot;menu-buttons&quot;&gt;Menu Buttons&lt;/h3&gt;
+                    </card15>
+                    <card16
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See menubuttons"
+                        buttonlink="library/menubuttons.html"
+                        buttoncolor="primary"
+                        title="menubuttons"
+                        text="&lt;h3 id=&quot;menu-buttons&quot;&gt;Menu Buttons&lt;/h3&gt;
 &lt;p&gt;The Menu Buttons components contains a collection of simple Buttons for use in the Header.&lt;/p&gt;
 ">
-        </card16>
-    <card17
-        jcr:primaryType="nt:unstructured"
-        buttontext="See navigation"
-        buttonlink="library/navigation.html"
-        buttoncolor="primary"
-        title="navigation"
-        text="&lt;h3 id=&quot;navigation&quot;&gt;Navigation&lt;/h3&gt;
+                    </card16>
+                    <card17
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See navigation"
+                        buttonlink="library/navigation.html"
+                        buttoncolor="primary"
+                        title="navigation"
+                        text="&lt;h3 id=&quot;navigation&quot;&gt;Navigation&lt;/h3&gt;
 &lt;p&gt;A component for displaying a site Navigation with optional dropdowns&lt;/p&gt;
 ">
-        </card17>
-    <card18
-        jcr:primaryType="nt:unstructured"
-        buttontext="See note"
-        buttonlink="library/note.html"
-        buttoncolor="primary"
-        title="note"
-        text="&lt;h3 id=&quot;note&quot;&gt;Note&lt;/h3&gt;
+                    </card17>
+                    <card18
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See note"
+                        buttonlink="library/note.html"
+                        buttoncolor="primary"
+                        title="note"
+                        text="&lt;h3 id=&quot;note&quot;&gt;Note&lt;/h3&gt;
 &lt;p&gt;The Note component is used to display small important messages to the reader&lt;/p&gt;
 ">
-        </card18>
-    <card19
-        jcr:primaryType="nt:unstructured"
-        buttontext="See pagelist"
-        buttonlink="library/pagelist.html"
-        buttoncolor="primary"
-        title="pagelist"
-        text="&lt;h3 id=&quot;pagelist&quot;&gt;Pagelist&lt;/h3&gt;
+                    </card18>
+                    <card19
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See pagelist"
+                        buttonlink="library/pagelist.html"
+                        buttoncolor="primary"
+                        title="pagelist"
+                        text="&lt;h3 id=&quot;pagelist&quot;&gt;Pagelist&lt;/h3&gt;
 &lt;p&gt;The Page List component displays the hierarchy of the current site to a given depth.&lt;/p&gt;
 ">
-        </card19>
-    <card20
-        jcr:primaryType="nt:unstructured"
-        buttontext="See pagelistnested"
-        buttonlink="library/pagelistnested.html"
-        buttoncolor="primary"
-        title="pagelistnested"
-        text="&lt;h3 id=&quot;page-list-nested&quot;&gt;Page List Nested&lt;/h3&gt;
+                    </card19>
+                    <card20
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See pagelistnested"
+                        buttonlink="library/pagelistnested.html"
+                        buttoncolor="primary"
+                        title="pagelistnested"
+                        text="&lt;h3 id=&quot;page-list-nested&quot;&gt;Page List Nested&lt;/h3&gt;
 &lt;p&gt;Used by the PageList component&lt;/p&gt;
 ">
-        </card20>
-    <card21
-        jcr:primaryType="nt:unstructured"
-        buttontext="See pager"
-        buttonlink="library/pager.html"
-        buttoncolor="primary"
-        title="pager"
-        text="&lt;h3 id=&quot;pager&quot;&gt;Pager&lt;/h3&gt;
+                    </card20>
+                    <card21
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See pager"
+                        buttonlink="library/pager.html"
+                        buttoncolor="primary"
+                        title="pager"
+                        text="&lt;h3 id=&quot;pager&quot;&gt;Pager&lt;/h3&gt;
 &lt;p&gt;The Pager Component provides convenient access to the next and previous pages in the content repository.&lt;/p&gt;
 ">
-        </card21>
-    <card22
-        jcr:primaryType="nt:unstructured"
-        buttontext="See quote"
-        buttonlink="library/quote.html"
-        buttoncolor="primary"
-        title="quote"
-        text="&lt;h3 id=&quot;quote&quot;&gt;Quote&lt;/h3&gt;
+                    </card21>
+                    <card22
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See quote"
+                        buttonlink="library/quote.html"
+                        buttoncolor="primary"
+                        title="quote"
+                        text="&lt;h3 id=&quot;quote&quot;&gt;Quote&lt;/h3&gt;
 &lt;p&gt;The Quote component displays a text block with styling to indicate that is is a quote.&lt;/p&gt;
 ">
-        </card22>
-    <card23
-        jcr:primaryType="nt:unstructured"
-        buttontext="See richtext"
-        buttonlink="library/richtext.html"
-        buttoncolor="primary"
-        title="richtext"
-        text="&lt;h3 id=&quot;rich-text&quot;&gt;Rich Text&lt;/h3&gt;
+                    </card22>
+                    <card23
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See richtext"
+                        buttonlink="library/richtext.html"
+                        buttoncolor="primary"
+                        title="richtext"
+                        text="&lt;h3 id=&quot;rich-text&quot;&gt;Rich Text&lt;/h3&gt;
 &lt;p&gt;The Rich Text component displays text and is edited using a powerful rich text editor allowing you full control over the content of the component.&lt;/p&gt;
 ">
-        </card23>
-    <card24
-        jcr:primaryType="nt:unstructured"
-        buttontext="See simpletext"
-        buttonlink="library/simpletext.html"
-        buttoncolor="primary"
-        title="simpletext"
-        text="&lt;h3 id=&quot;simple-text&quot;&gt;Simple Text&lt;/h3&gt;
+                    </card23>
+                    <card24
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See simpletext"
+                        buttonlink="library/simpletext.html"
+                        buttoncolor="primary"
+                        title="simpletext"
+                        text="&lt;h3 id=&quot;simple-text&quot;&gt;Simple Text&lt;/h3&gt;
 &lt;p&gt;The Simple Text component displays text that is rendered into a single tag type. Great for quickly creating Headings.&lt;/p&gt;
 ">
-        </card24>
-    <card25
-        jcr:primaryType="nt:unstructured"
-        buttontext="See socialicons"
-        buttonlink="library/socialicons.html"
-        buttoncolor="primary"
-        title="socialicons"
-        text="&lt;h3 id=&quot;social-icons&quot;&gt;Social Icons&lt;/h3&gt;
+                    </card24>
+                    <card25
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See socialicons"
+                        buttonlink="library/socialicons.html"
+                        buttoncolor="primary"
+                        title="socialicons"
+                        text="&lt;h3 id=&quot;social-icons&quot;&gt;Social Icons&lt;/h3&gt;
 &lt;p&gt;The Social Icons component is used in the footer to provide links to your sites relevant social media.&lt;/p&gt;
 ">
-        </card25>
-    <card26
-        jcr:primaryType="nt:unstructured"
-        buttontext="See spacer"
-        buttonlink="library/spacer.html"
-        buttoncolor="primary"
-        title="spacer"
-        text="&lt;h3 id=&quot;spacer&quot;&gt;Spacer&lt;/h3&gt;
+                    </card25>
+                    <card26
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See spacer"
+                        buttonlink="library/spacer.html"
+                        buttoncolor="primary"
+                        title="spacer"
+                        text="&lt;h3 id=&quot;spacer&quot;&gt;Spacer&lt;/h3&gt;
 &lt;p&gt;The Spacer component is a very simple Block, allowing you to add extra space with or without a background to your page.&lt;/p&gt;
 ">
-        </card26>
-    <card27
-        jcr:primaryType="nt:unstructured"
-        buttontext="See tabs"
-        buttonlink="library/tabs.html"
-        buttoncolor="primary"
-        title="tabs"
-        text="&lt;h3 id=&quot;tabs&quot;&gt;Tabs&lt;/h3&gt;
+                    </card26>
+                    <card27
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See tabs"
+                        buttonlink="library/tabs.html"
+                        buttoncolor="primary"
+                        title="tabs"
+                        text="&lt;h3 id=&quot;tabs&quot;&gt;Tabs&lt;/h3&gt;
 &lt;p&gt;The Tabs component displays a list of content, but with only 1 active piece of content at a time.&lt;/p&gt;
 ">
-        </card27>
-    <card28
-        jcr:primaryType="nt:unstructured"
-        buttontext="See tags"
-        buttonlink="library/tags.html"
-        buttoncolor="primary"
-        title="tags"
-        text="&lt;h3 id=&quot;tags&quot;&gt;Tags&lt;/h3&gt;
+                    </card27>
+                    <card28
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See tags"
+                        buttonlink="library/tags.html"
+                        buttoncolor="primary"
+                        title="tags"
+                        text="&lt;h3 id=&quot;tags&quot;&gt;Tags&lt;/h3&gt;
 &lt;p&gt;Display the tags that are attached to this page.&lt;/p&gt;
 ">
-        </card28>
-    <card29
-        jcr:primaryType="nt:unstructured"
-        buttontext="See teaserhorizontal"
-        buttonlink="library/teaserhorizontal.html"
-        buttoncolor="primary"
-        title="teaserhorizontal"
-        text="&lt;h3 id=&quot;teaser-horizontal&quot;&gt;Teaser Horizontal&lt;/h3&gt;
+                    </card28>
+                    <card29
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See teaserhorizontal"
+                        buttonlink="library/teaserhorizontal.html"
+                        buttoncolor="primary"
+                        title="teaserhorizontal"
+                        text="&lt;h3 id=&quot;teaser-horizontal&quot;&gt;Teaser Horizontal&lt;/h3&gt;
 &lt;p&gt;The Horizontal Teaser component can be used to display a small amount of content with relevant links.&lt;/p&gt;
 ">
-        </card29>
-    <card30
-        jcr:primaryType="nt:unstructured"
-        buttontext="See teaservertical"
-        buttonlink="library/teaservertical.html"
-        buttoncolor="primary"
-        title="teaservertical"
-        text="&lt;h3 id=&quot;teaser-vertical&quot;&gt;Teaser Vertical&lt;/h3&gt;
+                    </card29>
+                    <card30
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See teaservertical"
+                        buttonlink="library/teaservertical.html"
+                        buttoncolor="primary"
+                        title="teaservertical"
+                        text="&lt;h3 id=&quot;teaser-vertical&quot;&gt;Teaser Vertical&lt;/h3&gt;
 &lt;p&gt;The Vertical Teaser component can be used to display a small amount of content with relevant links.&lt;/p&gt;
 ">
-        </card30>
-    <card31
-        jcr:primaryType="nt:unstructured"
-        buttontext="See textlinks"
-        buttonlink="library/textlinks.html"
-        buttoncolor="primary"
-        title="textlinks"
-        text="&lt;h3 id=&quot;text-links&quot;&gt;Text Links&lt;/h3&gt;
+                    </card30>
+                    <card31
+                        jcr:primaryType="nt:unstructured"
+                        buttontext="See textlinks"
+                        buttonlink="library/textlinks.html"
+                        buttoncolor="primary"
+                        title="textlinks"
+                        text="&lt;h3 id=&quot;text-links&quot;&gt;Text Links&lt;/h3&gt;
 &lt;p&gt;The Text Links components contains a collection of simple Links for use in the Header.&lt;/p&gt;
 ">
-        </card31>
-    
+                    </card31>
+
                 </cards>
-        </cards2>
-        
-        </container32><pager33
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            </cards2>
+
+        </container32>
+        <pager33
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager33>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/.content.xml
index 9d0caa055..2c0ea331a 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordion"
-            jcr:description="accordion themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordion"
+          jcr:description="accordion themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,195 +12,331 @@
         description="accordion themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container38
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container38
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;toggleaccordion&quot;&gt;Toggle/Accordion&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;toggleaccordion&quot;&gt;Toggle/Accordion&lt;/h1&gt;
 &lt;p&gt;Contains a list of items that expand when clicked on allowing you to hide content that is not immediately relevant to the user.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark (Features)&lt;/h2&gt;">
-        </title2><accordion5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"><accordiontoggle jcr:primaryType="nt:unstructured"><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c4></accordiontoggle>
-        </accordion5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media (Features)&lt;/h2&gt;">
-        </title6><accordion9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion"><accordiontoggle jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c8></accordiontoggle>
-        </accordion9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image (Features)&lt;/h2&gt;">
-        </title10><accordion14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c11
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c11><c12
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c13></accordiontoggle>
-        </accordion14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion (Features)&lt;/h2&gt;">
-        </title15><accordion16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE (.hidden)&lt;/h2&gt;">
-        </title17><accordion21
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c19><c20
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c20></accordiontoggle>
-        </accordion21><title22 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle (Features)&lt;/h2&gt;">
-        </title22><accordion26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article"><accordiontoggle jcr:primaryType="nt:unstructured"><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c24><c25
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c25></accordiontoggle>
-        </accordion26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media (Features)&lt;/h2&gt;">
-        </title27><accordion30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle"><accordiontoggle jcr:primaryType="nt:unstructured"><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c29></accordiontoggle>
-        </accordion30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light (Features)&lt;/h2&gt;">
-        </title31><accordion35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c34></accordiontoggle>
-        </accordion35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Dark (Features)&lt;/h2&gt;">
+            </title2>
+            <accordion5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c4>
+                </accordiontoggle>
+            </accordion5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - With Media (Features)&lt;/h2&gt;">
+            </title6>
+            <accordion9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c8>
+                </accordiontoggle>
+            </accordion9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image (Features)&lt;/h2&gt;">
+            </title10>
+            <accordion14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c11
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c11>
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c13>
+                </accordiontoggle>
+            </accordion14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion (Features)&lt;/h2&gt;">
+            </title15>
+            <accordion16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE (.hidden)&lt;/h2&gt;">
+            </title17>
+            <accordion21
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c19>
+                    <c20
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c20>
+                </accordiontoggle>
+            </accordion21>
+            <title22 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle (Features)&lt;/h2&gt;">
+            </title22>
+            <accordion26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c24>
+                    <c25
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c25>
+                </accordiontoggle>
+            </accordion26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media (Features)&lt;/h2&gt;">
+            </title27>
+            <accordion30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c29>
+                </accordiontoggle>
+            </accordion30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light (Features)&lt;/h2&gt;">
+            </title31>
+            <accordion35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c34>
+                </accordiontoggle>
+            </accordion35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion no default values (Empty)&lt;/h2&gt;">
+            </title36>
+            <accordion37
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion37>
+        </container38>
+        <pager39
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion no default values (Empty)&lt;/h2&gt;">
-        </title36><accordion37
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion37>
-        </container38><pager39
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager39>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordiondark/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordiondark/.content.xml
index 5ee19db72..bdb0aed9a 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordiondark/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordiondark/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample-accordiondark"
-            jcr:description="accordionsample-accordiondark themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample-accordiondark"
+          jcr:description="accordionsample-accordiondark themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,924 @@
         description="accordionsample-accordiondark themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c3></accordiontoggle>
-        </accordion4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><accordion8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light" bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c7></accordiontoggle>
-        </accordion8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><accordion12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c11></accordiontoggle>
-        </accordion12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><accordion16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="" bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c15></accordiontoggle>
-        </accordion16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c19></accordiontoggle>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><accordion24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="dark" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c23></accordiontoggle>
-        </accordion24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><accordion28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="dark" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c27></accordiontoggle>
-        </accordion28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><accordion32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="light" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c31></accordiontoggle>
-        </accordion32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><accordion36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="light" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c35></accordiontoggle>
-        </accordion36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c39></accordiontoggle>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover"><accordiontoggle jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c43></accordiontoggle>
-        </accordion44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><accordion48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"><accordiontoggle jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c47></accordiontoggle>
-        </accordion48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><accordion52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"><accordiontoggle jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c51></accordiontoggle>
-        </accordion52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><accordion56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="light" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"><accordiontoggle jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c55></accordiontoggle>
-        </accordion56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><accordion60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="light" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"><accordiontoggle jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c59></accordiontoggle>
-        </accordion60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><accordion64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"><accordiontoggle jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c63></accordiontoggle>
-        </accordion64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><accordion68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"><accordiontoggle jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c67></accordiontoggle>
-        </accordion68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><accordion72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c71></accordiontoggle>
-        </accordion72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><accordion76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c75></accordiontoggle>
-        </accordion76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><accordion80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c79></accordiontoggle>
-        </accordion80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><accordion84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c83></accordiontoggle>
-        </accordion84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><accordion88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c87></accordiontoggle>
-        </accordion88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><accordion92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c91></accordiontoggle>
-        </accordion92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><accordion96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"><accordiontoggle jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c95></accordiontoggle>
-        </accordion96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><accordion100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="dark" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"><accordiontoggle jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c99></accordiontoggle>
-        </accordion100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><accordion104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="light" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"><accordiontoggle jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c103></accordiontoggle>
-        </accordion104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><accordion108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="light" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"><accordiontoggle jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c107></accordiontoggle>
-        </accordion108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><accordion112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"><accordiontoggle jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c111></accordiontoggle>
-        </accordion112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark"
+                bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c3>
+                </accordiontoggle>
+            </accordion4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <accordion8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light"
+                bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c7>
+                </accordiontoggle>
+            </accordion8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <accordion12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light"
+                bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c11>
+                </accordiontoggle>
+            </accordion12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <accordion16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme=""
+                bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c15>
+                </accordiontoggle>
+            </accordion16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme=""
+                bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c19>
+                </accordiontoggle>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="dark"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c23>
+                </accordiontoggle>
+            </accordion24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <accordion28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="dark"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c27>
+                </accordiontoggle>
+            </accordion28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <accordion32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="light"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c31>
+                </accordiontoggle>
+            </accordion32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <accordion36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme="light"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c35>
+                </accordiontoggle>
+            </accordion36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme=""
+                bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c39>
+                </accordiontoggle>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="gradient" colorscheme=""
+                bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c43>
+                </accordiontoggle>
+            </accordion44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <accordion48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="dark"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c47>
+                </accordiontoggle>
+            </accordion48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <accordion52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="dark"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c51>
+                </accordiontoggle>
+            </accordion52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <accordion56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="light"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c55>
+                </accordiontoggle>
+            </accordion56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <accordion60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme="light"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c59>
+                </accordiontoggle>
+            </accordion60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <accordion64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme=""
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c63>
+                </accordiontoggle>
+            </accordion64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <accordion68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="image" colorscheme=""
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c67>
+                </accordiontoggle>
+            </accordion68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <accordion72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c71>
+                </accordiontoggle>
+            </accordion72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <accordion76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="dark"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c75>
+                </accordiontoggle>
+            </accordion76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <accordion80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c79>
+                </accordiontoggle>
+            </accordion80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <accordion84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme="light"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c83>
+                </accordiontoggle>
+            </accordion84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <accordion88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme=""
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c87>
+                </accordiontoggle>
+            </accordion88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <accordion92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="color" colorscheme=""
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c91>
+                </accordiontoggle>
+            </accordion92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <accordion96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="dark"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c95>
+                </accordiontoggle>
+            </accordion96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <accordion100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="dark"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c99>
+                </accordiontoggle>
+            </accordion100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <accordion104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="light"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c103>
+                </accordiontoggle>
+            </accordion104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <accordion108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="light"
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c107>
+                </accordiontoggle>
+            </accordion108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <accordion112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme=""
+                bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c111>
+                </accordiontoggle>
+            </accordion112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <accordion116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme=""
+                bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c115>
+                </accordiontoggle>
+            </accordion116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><accordion116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion Dark Theme" backgroundtype="video" colorscheme="" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"><accordiontoggle jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c115></accordiontoggle>
-        </accordion116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordionmedia/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordionmedia/.content.xml
index 1a5c4ebcf..453e18697 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordionmedia/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-accordionmedia/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample-accordionmedia"
-            jcr:description="accordionsample-accordionmedia themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample-accordionmedia"
+          jcr:description="accordionsample-accordionmedia themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,936 @@
         description="accordionsample-accordionmedia themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c3></accordiontoggle>
-        </accordion4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><accordion8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c7></accordiontoggle>
-        </accordion8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><accordion12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c11></accordiontoggle>
-        </accordion12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><accordion16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c15></accordiontoggle>
-        </accordion16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c19></accordiontoggle>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><accordion24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c23></accordiontoggle>
-        </accordion24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><accordion28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c27></accordiontoggle>
-        </accordion28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><accordion32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c31></accordiontoggle>
-        </accordion32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><accordion36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c35></accordiontoggle>
-        </accordion36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c39></accordiontoggle>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c43></accordiontoggle>
-        </accordion44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><accordion48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c47></accordiontoggle>
-        </accordion48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><accordion52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c51></accordiontoggle>
-        </accordion52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><accordion56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c55></accordiontoggle>
-        </accordion56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><accordion60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c59></accordiontoggle>
-        </accordion60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><accordion64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c63></accordiontoggle>
-        </accordion64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><accordion68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c67></accordiontoggle>
-        </accordion68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><accordion72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="false" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c71></accordiontoggle>
-        </accordion72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><accordion76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="false" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c75></accordiontoggle>
-        </accordion76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><accordion80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="false" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c79></accordiontoggle>
-        </accordion80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><accordion84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="false" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c83></accordiontoggle>
-        </accordion84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><accordion88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="false" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c87></accordiontoggle>
-        </accordion88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><accordion92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="false" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c91></accordiontoggle>
-        </accordion92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><accordion96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c95></accordiontoggle>
-        </accordion96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><accordion100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c99></accordiontoggle>
-        </accordion100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><accordion104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c103></accordiontoggle>
-        </accordion104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><accordion108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c107></accordiontoggle>
-        </accordion108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><accordion112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c111></accordiontoggle>
-        </accordion112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c3>
+                </accordiontoggle>
+            </accordion4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <accordion8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c7>
+                </accordiontoggle>
+            </accordion8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <accordion12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c11>
+                </accordiontoggle>
+            </accordion12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <accordion16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c15>
+                </accordiontoggle>
+            </accordion16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c19>
+                </accordiontoggle>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c23>
+                </accordiontoggle>
+            </accordion24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <accordion28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c27>
+                </accordiontoggle>
+            </accordion28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <accordion32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c31>
+                </accordiontoggle>
+            </accordion32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <accordion36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c35>
+                </accordiontoggle>
+            </accordion36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c39>
+                </accordiontoggle>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c43>
+                </accordiontoggle>
+            </accordion44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <accordion48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c47>
+                </accordiontoggle>
+            </accordion48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <accordion52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c51>
+                </accordiontoggle>
+            </accordion52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <accordion56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c55>
+                </accordiontoggle>
+            </accordion56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <accordion60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c59>
+                </accordiontoggle>
+            </accordion60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <accordion64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c63>
+                </accordiontoggle>
+            </accordion64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <accordion68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c67>
+                </accordiontoggle>
+            </accordion68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <accordion72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="false" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c71>
+                </accordiontoggle>
+            </accordion72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <accordion76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="false" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c75>
+                </accordiontoggle>
+            </accordion76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <accordion80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="false" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c79>
+                </accordiontoggle>
+            </accordion80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <accordion84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="false" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c83>
+                </accordiontoggle>
+            </accordion84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <accordion88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="false" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c87>
+                </accordiontoggle>
+            </accordion88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <accordion92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="false" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c91>
+                </accordiontoggle>
+            </accordion92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <accordion96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c95>
+                </accordiontoggle>
+            </accordion96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <accordion100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c99>
+                </accordiontoggle>
+            </accordion100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <accordion104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c103>
+                </accordiontoggle>
+            </accordion104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <accordion108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c107>
+                </accordiontoggle>
+            </accordion108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <accordion112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c111>
+                </accordiontoggle>
+            </accordion112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <accordion116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article"
+                toggletype="accordion" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c115>
+                </accordiontoggle>
+            </accordion116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - With Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><accordion116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/heel_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" showmedia="true" blockwidth="article" toggletype="accordion" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c115></accordiontoggle>
-        </accordion116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-bg/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-bg/.content.xml
index 7f69fe8e8..c3b7a791c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-bg/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-bg/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample-bg"
-            jcr:description="accordionsample-bg themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample-bg"
+          jcr:description="accordionsample-bg themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1092 @@
         description="accordionsample-bg themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff80c0" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c4></accordiontoggle>
-        </accordion5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><accordion10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff80c0" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c9></accordiontoggle>
-        </accordion10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><accordion15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff80c0" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c14></accordiontoggle>
-        </accordion15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff80c0" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c19></accordiontoggle>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><accordion25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff80c0" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c24></accordiontoggle>
-        </accordion25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><accordion30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c29></accordiontoggle>
-        </accordion30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><accordion35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c34></accordiontoggle>
-        </accordion35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c39></accordiontoggle>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c44></accordiontoggle>
-        </accordion45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><accordion50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c49></accordiontoggle>
-        </accordion50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><accordion55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c54></accordiontoggle>
-        </accordion55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><accordion60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c59></accordiontoggle>
-        </accordion60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><accordion65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c64></accordiontoggle>
-        </accordion65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><accordion70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c69></accordiontoggle>
-        </accordion70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><accordion75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c74></accordiontoggle>
-        </accordion75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><accordion80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c79></accordiontoggle>
-        </accordion80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><accordion85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c84></accordiontoggle>
-        </accordion85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><accordion90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c89></accordiontoggle>
-        </accordion90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><accordion95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c94></accordiontoggle>
-        </accordion95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><accordion100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c99></accordiontoggle>
-        </accordion100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><accordion105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c104></accordiontoggle>
-        </accordion105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><accordion110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c109></accordiontoggle>
-        </accordion110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><accordion115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c114></accordiontoggle>
-        </accordion115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><accordion120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c119></accordiontoggle>
-        </accordion120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><accordion125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c124></accordiontoggle>
-        </accordion125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><accordion130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c129></accordiontoggle>
-        </accordion130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><accordion135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c134></accordiontoggle>
-        </accordion135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><accordion140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c139></accordiontoggle>
-        </accordion140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff80c0" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c4>
+                </accordiontoggle>
+            </accordion5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <accordion10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff80c0" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c9>
+                </accordiontoggle>
+            </accordion10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <accordion15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff80c0" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c14>
+                </accordiontoggle>
+            </accordion15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff80c0" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c19>
+                </accordiontoggle>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff80c0" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c24>
+                </accordiontoggle>
+            </accordion25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <accordion30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c29>
+                </accordiontoggle>
+            </accordion30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <accordion35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c34>
+                </accordiontoggle>
+            </accordion35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c39>
+                </accordiontoggle>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c44>
+                </accordiontoggle>
+            </accordion45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <accordion50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c49>
+                </accordiontoggle>
+            </accordion50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <accordion55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgcolor="#ff8040" color2="#0080ff" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c54>
+                </accordiontoggle>
+            </accordion55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <accordion60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c59>
+                </accordiontoggle>
+            </accordion60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <accordion65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c64>
+                </accordiontoggle>
+            </accordion65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <accordion70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c69>
+                </accordiontoggle>
+            </accordion70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <accordion75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c74>
+                </accordiontoggle>
+            </accordion75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <accordion80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c79>
+                </accordiontoggle>
+            </accordion80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <accordion85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c84>
+                </accordiontoggle>
+            </accordion85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <accordion90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c89>
+                </accordiontoggle>
+            </accordion90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <accordion95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c94>
+                </accordiontoggle>
+            </accordion95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <accordion100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c99>
+                </accordiontoggle>
+            </accordion100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <accordion105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c104>
+                </accordiontoggle>
+            </accordion105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <accordion110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c109>
+                </accordiontoggle>
+            </accordion110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <accordion115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="false" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c114>
+                </accordiontoggle>
+            </accordion115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <accordion120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c119>
+                </accordiontoggle>
+            </accordion120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <accordion125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c124>
+                </accordiontoggle>
+            </accordion125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <accordion130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c129>
+                </accordiontoggle>
+            </accordion130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <accordion135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c134>
+                </accordiontoggle>
+            </accordion135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <accordion140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c139>
+                </accordiontoggle>
+            </accordion140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <accordion145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover"
+                backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150"
+                toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c144>
+                </accordiontoggle>
+            </accordion145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Background Image Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><accordion145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" overlay="true" overlaycolor="#000000" overlayopacity="25" bottompadding="150" toppadding="150" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c144></accordiontoggle>
-        </accordion145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-blank/.content.xml
index c69411b5f..ed9626ae6 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample-blank"
-            jcr:description="accordionsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample-blank"
+          jcr:description="accordionsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="accordionsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><accordion4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><accordion6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><accordion8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><accordion10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><accordion12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><accordion14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><accordion16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><accordion18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><accordion22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><accordion24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><accordion26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><accordion28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><accordion30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><accordion32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><accordion34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><accordion36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="false" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><accordion38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="false" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="false" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="false" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><accordion44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="false" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><accordion46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="false" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><accordion48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><accordion50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><accordion52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><accordion54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><accordion56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <accordion4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <accordion6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <accordion8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <accordion10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <accordion12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <accordion14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <accordion16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <accordion18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <accordion24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <accordion26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <accordion28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <accordion30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <accordion32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <accordion34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <accordion36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <accordion38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <accordion44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="false" colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <accordion46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="false" colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <accordion48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <accordion50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <accordion52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <accordion54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <accordion56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <accordion58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </accordion58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><accordion58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </accordion58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-rte/.content.xml
index 1b10c7123..1bd8bac50 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample-rte"
-            jcr:description="accordionsample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample-rte"
+          jcr:description="accordionsample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1040 @@
         description="accordionsample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c4></accordiontoggle>
-        </accordion5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><accordion10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c9></accordiontoggle>
-        </accordion10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><accordion15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c14></accordiontoggle>
-        </accordion15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c19></accordiontoggle>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><accordion25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c24></accordiontoggle>
-        </accordion25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><accordion30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c29></accordiontoggle>
-        </accordion30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><accordion35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c34></accordiontoggle>
-        </accordion35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c39></accordiontoggle>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c44></accordiontoggle>
-        </accordion45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><accordion50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c49></accordiontoggle>
-        </accordion50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><accordion55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c54></accordiontoggle>
-        </accordion55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><accordion60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c59></accordiontoggle>
-        </accordion60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><accordion65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c64></accordiontoggle>
-        </accordion65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><accordion70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c69></accordiontoggle>
-        </accordion70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><accordion75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c74></accordiontoggle>
-        </accordion75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><accordion80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c79></accordiontoggle>
-        </accordion80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><accordion85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c84></accordiontoggle>
-        </accordion85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><accordion90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c89></accordiontoggle>
-        </accordion90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><accordion95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c94></accordiontoggle>
-        </accordion95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><accordion100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c99></accordiontoggle>
-        </accordion100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><accordion105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c104></accordiontoggle>
-        </accordion105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><accordion110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c109></accordiontoggle>
-        </accordion110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><accordion115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c114></accordiontoggle>
-        </accordion115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><accordion120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c119></accordiontoggle>
-        </accordion120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><accordion125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c124></accordiontoggle>
-        </accordion125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><accordion130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c129></accordiontoggle>
-        </accordion130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><accordion135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c134></accordiontoggle>
-        </accordion135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><accordion140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c139></accordiontoggle>
-        </accordion140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c4>
+                </accordiontoggle>
+            </accordion5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <accordion10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c9>
+                </accordiontoggle>
+            </accordion10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <accordion15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c14>
+                </accordiontoggle>
+            </accordion15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme=""
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c19>
+                </accordiontoggle>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#ff80c0"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme=""
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c24>
+                </accordiontoggle>
+            </accordion25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <accordion30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c29>
+                </accordiontoggle>
+            </accordion30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <accordion35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c34>
+                </accordiontoggle>
+            </accordion35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c39>
+                </accordiontoggle>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c44>
+                </accordiontoggle>
+            </accordion45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <accordion50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme=""
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c49>
+                </accordiontoggle>
+            </accordion50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <accordion55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme=""
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c54>
+                </accordiontoggle>
+            </accordion55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <accordion60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c59>
+                </accordiontoggle>
+            </accordion60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <accordion65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c64>
+                </accordiontoggle>
+            </accordion65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <accordion70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c69>
+                </accordiontoggle>
+            </accordion70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <accordion75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c74>
+                </accordiontoggle>
+            </accordion75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <accordion80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c79>
+                </accordiontoggle>
+            </accordion80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <accordion85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="image" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c84>
+                </accordiontoggle>
+            </accordion85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <accordion90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="dark"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c89>
+                </accordiontoggle>
+            </accordion90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <accordion95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="dark"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c94>
+                </accordiontoggle>
+            </accordion95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <accordion100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="light"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c99>
+                </accordiontoggle>
+            </accordion100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <accordion105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="light"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c104>
+                </accordiontoggle>
+            </accordion105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <accordion110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme=""
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c109>
+                </accordiontoggle>
+            </accordion110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <accordion115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="color" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme=""
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c114>
+                </accordiontoggle>
+            </accordion115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <accordion120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c119>
+                </accordiontoggle>
+            </accordion120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <accordion125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c124>
+                </accordiontoggle>
+            </accordion125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <accordion130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c129>
+                </accordiontoggle>
+            </accordion130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <accordion135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c134>
+                </accordiontoggle>
+            </accordion135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <accordion140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c139>
+                </accordiontoggle>
+            </accordion140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <accordion145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1"
+                color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Big RTE Test Chunk">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c144>
+                </accordiontoggle>
+            </accordion145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><accordion145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion With Full RTE" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Big RTE Test Chunk">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c144></accordiontoggle>
-        </accordion145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-toggle/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-toggle/.content.xml
index c15e91b9c..e52842b1f 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-toggle/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-toggle/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample-toggle"
-            jcr:description="accordionsample-toggle themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample-toggle"
+          jcr:description="accordionsample-toggle themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1023 @@
         description="accordionsample-toggle themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c4></accordiontoggle>
-        </accordion5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><accordion10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c9></accordiontoggle>
-        </accordion10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><accordion15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c14></accordiontoggle>
-        </accordion15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c19></accordiontoggle>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><accordion25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c24></accordiontoggle>
-        </accordion25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><accordion30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c29></accordiontoggle>
-        </accordion30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><accordion35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c34></accordiontoggle>
-        </accordion35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c39></accordiontoggle>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c44></accordiontoggle>
-        </accordion45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><accordion50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c49></accordiontoggle>
-        </accordion50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><accordion55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c54></accordiontoggle>
-        </accordion55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><accordion60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c59></accordiontoggle>
-        </accordion60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><accordion65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c64></accordiontoggle>
-        </accordion65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><accordion70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c69></accordiontoggle>
-        </accordion70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><accordion75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c74></accordiontoggle>
-        </accordion75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><accordion80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c79></accordiontoggle>
-        </accordion80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><accordion85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c84></accordiontoggle>
-        </accordion85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><accordion90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="false" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c89></accordiontoggle>
-        </accordion90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><accordion95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="false" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c94></accordiontoggle>
-        </accordion95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><accordion100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="false" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c99></accordiontoggle>
-        </accordion100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><accordion105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="false" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c104></accordiontoggle>
-        </accordion105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><accordion110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="false" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c109></accordiontoggle>
-        </accordion110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><accordion115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="false" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c114></accordiontoggle>
-        </accordion115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><accordion120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c119></accordiontoggle>
-        </accordion120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><accordion125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c124></accordiontoggle>
-        </accordion125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><accordion130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c129></accordiontoggle>
-        </accordion130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><accordion135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c134></accordiontoggle>
-        </accordion135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><accordion140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c139></accordiontoggle>
-        </accordion140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c4>
+                </accordiontoggle>
+            </accordion5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <accordion10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c9>
+                </accordiontoggle>
+            </accordion10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <accordion15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c14>
+                </accordiontoggle>
+            </accordion15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c19>
+                </accordiontoggle>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c24>
+                </accordiontoggle>
+            </accordion25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <accordion30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c29>
+                </accordiontoggle>
+            </accordion30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <accordion35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c34>
+                </accordiontoggle>
+            </accordion35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c39>
+                </accordiontoggle>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c44>
+                </accordiontoggle>
+            </accordion45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <accordion50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c49>
+                </accordiontoggle>
+            </accordion50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <accordion55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c54>
+                </accordiontoggle>
+            </accordion55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <accordion60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c59>
+                </accordiontoggle>
+            </accordion60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <accordion65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c64>
+                </accordiontoggle>
+            </accordion65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <accordion70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c69>
+                </accordiontoggle>
+            </accordion70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <accordion75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c74>
+                </accordiontoggle>
+            </accordion75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <accordion80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c79>
+                </accordiontoggle>
+            </accordion80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <accordion85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c84>
+                </accordiontoggle>
+            </accordion85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <accordion90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="false" colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c89>
+                </accordiontoggle>
+            </accordion90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <accordion95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="false" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c94>
+                </accordiontoggle>
+            </accordion95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <accordion100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="false" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c99>
+                </accordiontoggle>
+            </accordion100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <accordion105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="false" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c104>
+                </accordiontoggle>
+            </accordion105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <accordion110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="false" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c109>
+                </accordiontoggle>
+            </accordion110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <accordion115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="false" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c114>
+                </accordiontoggle>
+            </accordion115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <accordion120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c119>
+                </accordiontoggle>
+            </accordion120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <accordion125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c124>
+                </accordiontoggle>
+            </accordion125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <accordion130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c129>
+                </accordiontoggle>
+            </accordion130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <accordion135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c134>
+                </accordiontoggle>
+            </accordion135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <accordion140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c139>
+                </accordiontoggle>
+            </accordion140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <accordion145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33"
+                blockwidth="article" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c144>
+                </accordiontoggle>
+            </accordion145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><accordion145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" toggletype="toggle" showmedia="false" mediawidth="33" blockwidth="article" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c144></accordiontoggle>
-        </accordion145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-togglemedia/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-togglemedia/.content.xml
index 972497a59..4f9e449c4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-togglemedia/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample-togglemedia/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample-togglemedia"
-            jcr:description="accordionsample-togglemedia themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample-togglemedia"
+          jcr:description="accordionsample-togglemedia themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,936 @@
         description="accordionsample-togglemedia themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c3></accordiontoggle>
-        </accordion4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><accordion8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c7></accordiontoggle>
-        </accordion8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><accordion12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c11></accordiontoggle>
-        </accordion12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><accordion16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c15></accordiontoggle>
-        </accordion16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c19></accordiontoggle>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><accordion24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c23></accordiontoggle>
-        </accordion24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><accordion28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c27></accordiontoggle>
-        </accordion28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><accordion32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c31></accordiontoggle>
-        </accordion32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><accordion36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c35></accordiontoggle>
-        </accordion36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c39></accordiontoggle>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c43></accordiontoggle>
-        </accordion44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><accordion48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c47></accordiontoggle>
-        </accordion48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><accordion52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c51></accordiontoggle>
-        </accordion52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><accordion56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c55></accordiontoggle>
-        </accordion56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><accordion60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c59></accordiontoggle>
-        </accordion60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><accordion64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c63></accordiontoggle>
-        </accordion64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><accordion68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c67></accordiontoggle>
-        </accordion68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><accordion72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="false" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c71></accordiontoggle>
-        </accordion72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><accordion76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="false" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c75></accordiontoggle>
-        </accordion76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><accordion80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="false" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c79></accordiontoggle>
-        </accordion80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><accordion84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="false" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c83></accordiontoggle>
-        </accordion84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><accordion88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="false" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c87></accordiontoggle>
-        </accordion88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><accordion92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="false" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c91></accordiontoggle>
-        </accordion92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><accordion96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c95></accordiontoggle>
-        </accordion96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><accordion100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><accordiontoggle jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c99></accordiontoggle>
-        </accordion100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><accordion104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c103></accordiontoggle>
-        </accordion104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><accordion108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><accordiontoggle jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c107></accordiontoggle>
-        </accordion108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><accordion112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c111></accordiontoggle>
-        </accordion112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c3>
+                </accordiontoggle>
+            </accordion4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <accordion8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c7>
+                </accordiontoggle>
+            </accordion8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <accordion12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c11>
+                </accordiontoggle>
+            </accordion12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <accordion16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c15>
+                </accordiontoggle>
+            </accordion16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c19>
+                </accordiontoggle>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c23>
+                </accordiontoggle>
+            </accordion24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <accordion28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c27>
+                </accordiontoggle>
+            </accordion28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <accordion32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c31>
+                </accordiontoggle>
+            </accordion32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <accordion36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c35>
+                </accordiontoggle>
+            </accordion36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c39>
+                </accordiontoggle>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c43>
+                </accordiontoggle>
+            </accordion44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <accordion48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c47>
+                </accordiontoggle>
+            </accordion48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <accordion52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c51>
+                </accordiontoggle>
+            </accordion52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <accordion56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c55>
+                </accordiontoggle>
+            </accordion56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <accordion60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c59>
+                </accordiontoggle>
+            </accordion60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <accordion64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c63>
+                </accordiontoggle>
+            </accordion64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <accordion68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="image" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c67>
+                </accordiontoggle>
+            </accordion68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <accordion72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="false" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c71>
+                </accordiontoggle>
+            </accordion72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <accordion76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="false" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c75>
+                </accordiontoggle>
+            </accordion76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <accordion80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="false" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c79>
+                </accordiontoggle>
+            </accordion80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <accordion84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="false" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c83>
+                </accordiontoggle>
+            </accordion84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <accordion88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="false" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c87>
+                </accordiontoggle>
+            </accordion88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <accordion92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="color" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="false" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c91>
+                </accordiontoggle>
+            </accordion92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <accordion96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c95>
+                </accordiontoggle>
+            </accordion96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <accordion100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c99>
+                </accordiontoggle>
+            </accordion100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <accordion104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c103>
+                </accordiontoggle>
+            </accordion104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <accordion108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c107>
+                </accordiontoggle>
+            </accordion108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <accordion112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="false" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c111>
+                </accordiontoggle>
+            </accordion112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <accordion116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff"
+                fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after"
+                imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg"
+                mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true"
+                toggletype="toggle" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c115>
+                </accordiontoggle>
+            </accordion116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Toggle  - With Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><accordion116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Toggle" backgroundtype="video" bgcolor="#ffffff" color2="#ffffff" fullheight="true" bottompadding="30" toppadding="30" mediatype="image" mediaposition="after" imagesrc="/content/themecleanflex/assets/samples/oldboat_small.jpg" mediatitle="Old Ship sailing into sunset" mediawidth="33" blockwidth="article" showmedia="true" toggletype="toggle" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><accordiontoggle jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c115></accordiontoggle>
-        </accordion116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample/.content.xml
index 656180dc5..c3c7c684c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/accordion/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | accordionsample"
-            jcr:description="accordionsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | accordionsample"
+          jcr:description="accordionsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1029 @@
         description="accordionsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><accordion5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c4></accordiontoggle>
-        </accordion5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><accordion10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c9></accordiontoggle>
-        </accordion10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><accordion15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c14></accordiontoggle>
-        </accordion15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><accordion20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c19></accordiontoggle>
-        </accordion20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><accordion25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c24></accordiontoggle>
-        </accordion25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><accordion30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c29></accordiontoggle>
-        </accordion30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><accordion35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c34></accordiontoggle>
-        </accordion35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><accordion40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c39></accordiontoggle>
-        </accordion40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><accordion45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c44></accordiontoggle>
-        </accordion45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><accordion50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c49></accordiontoggle>
-        </accordion50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><accordion55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c54></accordiontoggle>
-        </accordion55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><accordion60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c59></accordiontoggle>
-        </accordion60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><accordion65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c64></accordiontoggle>
-        </accordion65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><accordion70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c69></accordiontoggle>
-        </accordion70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><accordion75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c74></accordiontoggle>
-        </accordion75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><accordion80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c79></accordiontoggle>
-        </accordion80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><accordion85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c84></accordiontoggle>
-        </accordion85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><accordion90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c89></accordiontoggle>
-        </accordion90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><accordion95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c94></accordiontoggle>
-        </accordion95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><accordion100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c99></accordiontoggle>
-        </accordion100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><accordion105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c104></accordiontoggle>
-        </accordion105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><accordion110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c109></accordiontoggle>
-        </accordion110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><accordion115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="false" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c114></accordiontoggle>
-        </accordion115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><accordion120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c119></accordiontoggle>
-        </accordion120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><accordion125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c124></accordiontoggle>
-        </accordion125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><accordion130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c129></accordiontoggle>
-        </accordion130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><accordion135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c134></accordiontoggle>
-        </accordion135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><accordion140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><accordiontoggle jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c139></accordiontoggle>
-        </accordion140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <accordion5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c4>
+                </accordiontoggle>
+            </accordion5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <accordion10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c9>
+                </accordiontoggle>
+            </accordion10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <accordion15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c14>
+                </accordiontoggle>
+            </accordion15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <accordion20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c19>
+                </accordiontoggle>
+            </accordion20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <accordion25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#ff80c0" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c24>
+                </accordiontoggle>
+            </accordion25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <accordion30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark"
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c29>
+                </accordiontoggle>
+            </accordion30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <accordion35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme="dark"
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c34>
+                </accordiontoggle>
+            </accordion35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <accordion40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c39>
+                </accordiontoggle>
+            </accordion40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <accordion45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover"
+                colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c44>
+                </accordiontoggle>
+            </accordion45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <accordion50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme=""
+                fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c49>
+                </accordiontoggle>
+            </accordion50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <accordion55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33"
+                blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" colorscheme=""
+                fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c54>
+                </accordiontoggle>
+            </accordion55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <accordion60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c59>
+                </accordiontoggle>
+            </accordion60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <accordion65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c64>
+                </accordiontoggle>
+            </accordion65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <accordion70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c69>
+                </accordiontoggle>
+            </accordion70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <accordion75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c74>
+                </accordiontoggle>
+            </accordion75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <accordion80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c79>
+                </accordiontoggle>
+            </accordion80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <accordion85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="image" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c84>
+                </accordiontoggle>
+            </accordion85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <accordion90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="false" colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c89>
+                </accordiontoggle>
+            </accordion90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <accordion95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="false" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c94>
+                </accordiontoggle>
+            </accordion95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <accordion100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="false" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c99>
+                </accordiontoggle>
+            </accordion100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <accordion105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="false" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c104>
+                </accordiontoggle>
+            </accordion105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <accordion110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="false" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c109>
+                </accordiontoggle>
+            </accordion110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <accordion115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="color" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="false" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c114>
+                </accordiontoggle>
+            </accordion115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <accordion120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c119>
+                </accordiontoggle>
+            </accordion120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <accordion125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c124>
+                </accordiontoggle>
+            </accordion125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <accordion130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c129>
+                </accordiontoggle>
+            </accordion130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <accordion135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c134>
+                </accordiontoggle>
+            </accordion135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <accordion140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c139>
+                </accordiontoggle>
+            </accordion140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <accordion145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion"
+                showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff"
+                bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article"
+                accordionortoggle="false" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <accordiontoggle jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Why accordion?">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="How to accordion?">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;"
+                        title="Join accordion">
+                    </c144>
+                </accordiontoggle>
+            </accordion145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Accordion - Light Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><accordion145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/accordion" showtitle="true" title="Peregrine Accordion" backgroundtype="video" bgcolor="#f1f1f1" color2="#ffffff" bottompadding="30" toppadding="30" showmedia="false" mediawidth="33" blockwidth="article" accordionortoggle="false" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><accordiontoggle jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Why accordion?">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="How to accordion?">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;" title="Join accordion">
-        </c144></accordiontoggle>
-        </accordion145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/block/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/block/.content.xml
index 3ffade4cc..4ba953f62 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/block/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/block/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | block"
-            jcr:description="block themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | block"
+          jcr:description="block themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,69 +12,90 @@
         description="block themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container2
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container2
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;block&quot;&gt;Block&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;block&quot;&gt;Block&lt;/h1&gt;
 &lt;p&gt;The basic building block of the theme. Pages can be built quickly by vertically stacking blocks with different content. Blocks have many options for changing background settings to add visual variety to your pages.&lt;/p&gt;
 ">
-        </intro1>
-        
-        </container2><pager3
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            </intro1>
+
+        </container2>
+        <pager3
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager3>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/.content.xml
index 92a9be584..97f123d21 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | breadcrumb"
-            jcr:description="breadcrumb themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | breadcrumb"
+          jcr:description="breadcrumb themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,80 +12,104 @@
         description="breadcrumb themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container4
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container4
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;breadcrumb&quot;&gt;Breadcrumb&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;breadcrumb&quot;&gt;Breadcrumb&lt;/h1&gt;
 &lt;p&gt;The breadcrumb component displays the current route in the site with links to quickly navigate back up to parent pages.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Breadcrumb (Chrome)&lt;/h2&gt;">
+            </title2>
+            <breadcrumb3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb3>
+        </container4>
+        <pager5
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb (Chrome)&lt;/h2&gt;">
-        </title2><breadcrumb3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb3>
-        </container4><pager5
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager5>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/sample/.content.xml
index 441ad324a..633769298 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/breadcrumb/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | breadcrumbsample"
-            jcr:description="breadcrumbsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | breadcrumbsample"
+          jcr:description="breadcrumbsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,375 +12,541 @@
         description="breadcrumbsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><breadcrumb2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><breadcrumb4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><breadcrumb6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><breadcrumb8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><breadcrumb10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><breadcrumb12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><breadcrumb14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><breadcrumb16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><breadcrumb18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><breadcrumb20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><breadcrumb22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><breadcrumb24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><breadcrumb26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><breadcrumb28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><breadcrumb30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><breadcrumb32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><breadcrumb34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><breadcrumb36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="false" colorscheme="dark" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><breadcrumb38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="false" colorscheme="dark" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><breadcrumb40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="false" colorscheme="light" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><breadcrumb42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="false" colorscheme="light" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><breadcrumb44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="false" colorscheme="" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><breadcrumb46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="false" colorscheme="" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><breadcrumb48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><breadcrumb50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><breadcrumb52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><breadcrumb54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><breadcrumb56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <breadcrumb2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="dark" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <breadcrumb4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <breadcrumb6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <breadcrumb8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Breadcrumb Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <breadcrumb10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <breadcrumb12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <breadcrumb14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <breadcrumb16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <breadcrumb18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <breadcrumb20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <breadcrumb22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <breadcrumb24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <breadcrumb26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <breadcrumb28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <breadcrumb30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <breadcrumb32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <breadcrumb34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <breadcrumb36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="false" colorscheme="dark" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <breadcrumb38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="false" colorscheme="dark" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <breadcrumb40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="false" colorscheme="light" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <breadcrumb42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="false" colorscheme="light" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <breadcrumb44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="false" colorscheme="" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <breadcrumb46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="false" colorscheme="" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <breadcrumb48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <breadcrumb50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <breadcrumb52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <breadcrumb54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <breadcrumb56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <breadcrumb58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3"
+                linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+            </breadcrumb58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Breadcrumb Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><breadcrumb58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="3" linkcolor="primary" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </breadcrumb58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/.content.xml
index 187febda6..55f4128a8 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | cards"
-            jcr:description="cards themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | cards"
+          jcr:description="cards themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,141 +12,252 @@
         description="cards themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container23
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container23
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;cards&quot;&gt;Cards&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;cards&quot;&gt;Cards&lt;/h1&gt;
 &lt;p&gt;Cards are used for displaying small bits of information in visually distinct boxes with an optional image and link.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards (Features)&lt;/h2&gt;">
-        </title2><cards3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background (Features)&lt;/h2&gt;">
-        </title4><cards9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff"><cards jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c8></cards>
-        </cards9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE (.hidden)&lt;/h2&gt;">
-        </title10><cards14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee"><cards jcr:primaryType="nt:unstructured"><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c11><c12
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c13></cards>
-        </cards14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example (Features)&lt;/h2&gt;">
-        </title15><cards20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff"><cards jcr:primaryType="nt:unstructured"><c16
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c19></cards>
-        </cards20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards (Features)&lt;/h2&gt;">
+            </title2>
+            <cards3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards - No Background (Features)&lt;/h2&gt;">
+            </title4>
+            <cards9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c8>
+                </cards>
+            </cards9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE (.hidden)&lt;/h2&gt;">
+            </title10>
+            <cards14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c11>
+                    <c12
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c13>
+                </cards>
+            </cards14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example (Features)&lt;/h2&gt;">
+            </title15>
+            <cards20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c16
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c19>
+                </cards>
+            </cards20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards no default value (Empty)&lt;/h2&gt;">
+            </title21>
+            <cards22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards22>
+        </container23>
+        <pager24
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards no default value (Empty)&lt;/h2&gt;">
-        </title21><cards22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards22>
-        </container23><pager24
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager24>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-blank/.content.xml
index 651c0eca0..1922a6c4f 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | cardssample-blank"
-            jcr:description="cardssample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | cardssample-blank"
+          jcr:description="cardssample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,530 @@
         description="cardssample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><cards2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><cards4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><cards6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><cards8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><cards10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><cards12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><cards14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><cards16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><cards18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><cards20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><cards22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><cards24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><cards26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><cards28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><cards30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><cards32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><cards34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><cards36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><cards38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><cards40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><cards42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><cards44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><cards46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><cards48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><cards50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><cards52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><cards54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><cards56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <cards2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <cards4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <cards6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <cards8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <cards10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <cards12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <cards14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <cards16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <cards18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <cards20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <cards22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <cards24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <cards26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <cards28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <cards30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <cards32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <cards34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <cards36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="dark"
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <cards38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="dark"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <cards40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="light"
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <cards42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme="light"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <cards44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme=""
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <cards46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="false" colorscheme=""
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <cards48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <cards50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <cards52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <cards54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <cards56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <cards58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true"
+                showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured"></cards>
+            </cards58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><cards58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" showtitle="true" showtext="true" showbutton="true" showcard="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"></cards>
-        </cards58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-cardsnobackground/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-cardsnobackground/.content.xml
index 1d0807660..45cbc6adc 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-cardsnobackground/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-cardsnobackground/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | cardssample-cardsnobackground"
-            jcr:description="cardssample-cardsnobackground themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | cardssample-cardsnobackground"
+          jcr:description="cardssample-cardsnobackground themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,578 +12,1498 @@
         description="cardssample-cardsnobackground themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container175
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><cards6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c5></cards>
-        </cards6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><cards12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c8
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c11></cards>
-        </cards12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><cards18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c17></cards>
-        </cards18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><cards24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c20
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c20><c21
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c21><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c23></cards>
-        </cards24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><cards30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c29></cards>
-        </cards30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><cards36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c35></cards>
-        </cards36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><cards42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c39><c40
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c40><c41
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c41></cards>
-        </cards42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><cards48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c44
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c44><c45
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c47></cards>
-        </cards48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><cards54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c51><c52
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c53></cards>
-        </cards54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><cards60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c56
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c59></cards>
-        </cards60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><cards66
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c64><c65
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c65></cards>
-        </cards66><title67 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title67><cards72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c68
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c69><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c71></cards>
-        </cards72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><cards78
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c76><c77
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c77></cards>
-        </cards78><title79 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title79><cards84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c80
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c80><c81
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c81><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c83></cards>
-        </cards84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title85><cards90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c89></cards>
-        </cards90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><cards96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c95></cards>
-        </cards96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><cards102
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c99><c100
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c100><c101
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c101></cards>
-        </cards102><title103 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title103><cards108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="false" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c104
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c104><c105
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c107></cards>
-        </cards108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title109><cards114
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="false" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c111><c112
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c113></cards>
-        </cards114><title115 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title115><cards120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="false" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c116
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c119></cards>
-        </cards120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><cards126
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="false" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c124><c125
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c125></cards>
-        </cards126><title127 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title127><cards132
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="false" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c128
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c129><c130
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c130><c131
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c131></cards>
-        </cards132><title133 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title133><cards138
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="false" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c134
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c134><c135
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c136><c137
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c137></cards>
-        </cards138><title139 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title139><cards144
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c140
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c140><c141
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c141><c142
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c143></cards>
-        </cards144><title145 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title145><cards150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c146
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c148><c149
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c149></cards>
-        </cards150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><cards156
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c154><c155
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c155></cards>
-        </cards156><title157 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title157><cards162
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c158
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c159><c160
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c160><c161
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c161></cards>
-        </cards162><title163 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title163><cards168
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c164
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c164><c165
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c166><c167
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c167></cards>
-        </cards168><title169 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container175
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <cards6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="dark"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c4>
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c5>
+                </cards>
+            </cards6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <cards12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light"
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c8
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c11>
+                </cards>
+            </cards12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <cards18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c17>
+                </cards>
+            </cards18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <cards24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme=""
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c20
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c20>
+                    <c21
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c21>
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c23>
+                </cards>
+            </cards24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <cards30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme=""
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c29>
+                </cards>
+            </cards30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <cards36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c35>
+                </cards>
+            </cards36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <cards42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c39>
+                    <c40
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c40>
+                    <c41
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c41>
+                </cards>
+            </cards42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <cards48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c44
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c44>
+                    <c45
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c47>
+                </cards>
+            </cards48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <cards54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c51>
+                    <c52
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c53>
+                </cards>
+            </cards54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <cards60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c56
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c59>
+                </cards>
+            </cards60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <cards66
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c64>
+                    <c65
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c65>
+                </cards>
+            </cards66>
+            <title67 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title67>
+            <cards72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c68
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c69>
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c71>
+                </cards>
+            </cards72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <cards78
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c76>
+                    <c77
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c77>
+                </cards>
+            </cards78>
+            <title79 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title79>
+            <cards84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c80
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c80>
+                    <c81
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c81>
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c83>
+                </cards>
+            </cards84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title85>
+            <cards90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c89>
+                </cards>
+            </cards90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <cards96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c95>
+                </cards>
+            </cards96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - No Background Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <cards102
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c99>
+                    <c100
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c100>
+                    <c101
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c101>
+                </cards>
+            </cards102>
+            <title103 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title103>
+            <cards108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="false" colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c104
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c104>
+                    <c105
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c107>
+                </cards>
+            </cards108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title109>
+            <cards114
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="false" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c111>
+                    <c112
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c113>
+                </cards>
+            </cards114>
+            <title115 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title115>
+            <cards120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="false" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c116
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c119>
+                </cards>
+            </cards120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <cards126
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="false" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c124>
+                    <c125
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c125>
+                </cards>
+            </cards126>
+            <title127 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title127>
+            <cards132
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="false" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c128
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c129>
+                    <c130
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c130>
+                    <c131
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c131>
+                </cards>
+            </cards132>
+            <title133 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title133>
+            <cards138
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="false" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c134
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c134>
+                    <c135
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c136>
+                    <c137
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c137>
+                </cards>
+            </cards138>
+            <title139 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title139>
+            <cards144
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c140
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c140>
+                    <c141
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c141>
+                    <c142
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c143>
+                </cards>
+            </cards144>
+            <title145 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title145>
+            <cards150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c146
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c148>
+                    <c149
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c149>
+                </cards>
+            </cards150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <cards156
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c154>
+                    <c155
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c155>
+                </cards>
+            </cards156>
+            <title157 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title157>
+            <cards162
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c158
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c159>
+                    <c160
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c160>
+                    <c161
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c161>
+                </cards>
+            </cards162>
+            <title163 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title163>
+            <cards168
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c164
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c164>
+                    <c165
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c166>
+                    <c167
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c167>
+                </cards>
+            </cards168>
+            <title169 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title169>
+            <cards174
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20"
+                cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c170
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c170>
+                    <c171
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c171>
+                    <c172
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c172>
+                    <c173
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="info" buttonsize="default" buttonalign="right"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ."
+                        title="Card Four">
+                    </c173>
+                </cards>
+            </cards174>
+        </container175>
+        <pager176
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - No Background Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title169><cards174
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="false" toppadding="20" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c170
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c170><c171
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c171><c172
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c172><c173
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="info" buttonsize="default" buttonalign="right" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Messy pile of rope" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint ." title="Card Four">
-        </c173></cards>
-        </cards174>
-        </container175><pager176
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager176>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-rte/.content.xml
index fa2d6ed87..0ca876222 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | cardssample-rte"
-            jcr:description="cardssample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | cardssample-rte"
+          jcr:description="cardssample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1270 @@
         description="cardssample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><cards5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c4></cards>
-        </cards5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><cards10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c9></cards>
-        </cards10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><cards15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c14></cards>
-        </cards15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><cards20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c19></cards>
-        </cards20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><cards25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c24></cards>
-        </cards25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><cards30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c29></cards>
-        </cards30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><cards35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c34></cards>
-        </cards35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><cards40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c39></cards>
-        </cards40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><cards45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c44></cards>
-        </cards45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><cards50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c49></cards>
-        </cards50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><cards55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c54></cards>
-        </cards55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><cards60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c59></cards>
-        </cards60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><cards65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c64></cards>
-        </cards65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><cards70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c69></cards>
-        </cards70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><cards75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c74></cards>
-        </cards75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><cards80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c79></cards>
-        </cards80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><cards85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c84></cards>
-        </cards85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><cards90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c89></cards>
-        </cards90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><cards95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c94></cards>
-        </cards95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><cards100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c99></cards>
-        </cards100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><cards105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c104></cards>
-        </cards105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><cards110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c109></cards>
-        </cards110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><cards115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c114></cards>
-        </cards115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><cards120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c119></cards>
-        </cards120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><cards125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c124></cards>
-        </cards125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><cards130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c129></cards>
-        </cards130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><cards135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c134></cards>
-        </cards135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><cards140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c139></cards>
-        </cards140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <cards5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c4>
+                </cards>
+            </cards5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <cards10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c9>
+                </cards>
+            </cards10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <cards15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c14>
+                </cards>
+            </cards15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <cards20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color"
+                colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c19>
+                </cards>
+            </cards20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <cards25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="color"
+                colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c24>
+                </cards>
+            </cards25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <cards30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c29>
+                </cards>
+            </cards30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <cards35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c34>
+                </cards>
+            </cards35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <cards40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c39>
+                </cards>
+            </cards40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <cards45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c44>
+                </cards>
+            </cards45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <cards50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c49>
+                </cards>
+            </cards50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <cards55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c54>
+                </cards>
+            </cards55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <cards60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c59>
+                </cards>
+            </cards60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <cards65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c64>
+                </cards>
+            </cards65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <cards70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c69>
+                </cards>
+            </cards70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <cards75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c74>
+                </cards>
+            </cards75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <cards80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c79>
+                </cards>
+            </cards80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <cards85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c84>
+                </cards>
+            </cards85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <cards90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="dark"
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c89>
+                </cards>
+            </cards90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <cards95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="dark"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c94>
+                </cards>
+            </cards95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <cards100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="light"
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c99>
+                </cards>
+            </cards100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <cards105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="light"
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c104>
+                </cards>
+            </cards105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <cards110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c109>
+                </cards>
+            </cards110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <cards115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="false" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c114>
+                </cards>
+            </cards115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <cards120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c119>
+                </cards>
+            </cards120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <cards125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c124>
+                </cards>
+            </cards125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <cards130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c129>
+                </cards>
+            </cards130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <cards135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c134>
+                </cards>
+            </cards135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <cards140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c139>
+                </cards>
+            </cards140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <cards145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Card One">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c144>
+                </cards>
+            </cards145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><cards145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="true" cardcolor="#eeeeee" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Card One">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c144></cards>
-        </cards145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample/.content.xml
index ee5661995..e6d1d4dfd 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/cards/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | cardssample"
-            jcr:description="cardssample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | cardssample"
+          jcr:description="cardssample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,578 +12,1516 @@
         description="cardssample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container175
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><cards6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c5></cards>
-        </cards6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><cards12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c8
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c11></cards>
-        </cards12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><cards18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c17></cards>
-        </cards18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><cards24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c20
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c20><c21
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c21><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c23></cards>
-        </cards24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><cards30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="color" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c29></cards>
-        </cards30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><cards36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c35></cards>
-        </cards36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><cards42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c39><c40
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c40><c41
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c41></cards>
-        </cards42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><cards48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c44
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c44><c45
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c47></cards>
-        </cards48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><cards54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c51><c52
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c53></cards>
-        </cards54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><cards60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c56
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c59></cards>
-        </cards60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><cards66
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c64><c65
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c65></cards>
-        </cards66><title67 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title67><cards72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c68
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c69><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c71></cards>
-        </cards72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><cards78
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c76><c77
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c77></cards>
-        </cards78><title79 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title79><cards84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c80
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c80><c81
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c81><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c83></cards>
-        </cards84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title85><cards90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c89></cards>
-        </cards90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><cards96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c95></cards>
-        </cards96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><cards102
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c99><c100
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c100><c101
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c101></cards>
-        </cards102><title103 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title103><cards108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c104
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c104><c105
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c107></cards>
-        </cards108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title109><cards114
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c111><c112
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c113></cards>
-        </cards114><title115 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title115><cards120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c116
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c119></cards>
-        </cards120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><cards126
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c124><c125
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c125></cards>
-        </cards126><title127 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title127><cards132
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c128
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c129><c130
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c130><c131
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c131></cards>
-        </cards132><title133 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title133><cards138
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c134
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c134><c135
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c136><c137
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c137></cards>
-        </cards138><title139 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title139><cards144
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c140
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c140><c141
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c141><c142
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c143></cards>
-        </cards144><title145 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title145><cards150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c146
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c148><c149
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c149></cards>
-        </cards150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><cards156
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c154><c155
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c155></cards>
-        </cards156><title157 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title157><cards162
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c158
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c159><c160
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c160><c161
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c161></cards>
-        </cards162><title163 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title163><cards168
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><cards jcr:primaryType="nt:unstructured"><c164
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c164><c165
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c166><c167
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c167></cards>
-        </cards168><title169 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container175
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <cards6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="color" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c4>
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c5>
+                </cards>
+            </cards6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <cards12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c8
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c11>
+                </cards>
+            </cards12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <cards18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="color" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c17>
+                </cards>
+            </cards18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <cards24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="color" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c20
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c20>
+                    <c21
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c21>
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c23>
+                </cards>
+            </cards24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <cards30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff80c0"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="color" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c29>
+                </cards>
+            </cards30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <cards36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c35>
+                </cards>
+            </cards36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <cards42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c39>
+                    <c40
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c40>
+                    <c41
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c41>
+                </cards>
+            </cards42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <cards48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c44
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c44>
+                    <c45
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c47>
+                </cards>
+            </cards48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <cards54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c51>
+                    <c52
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c53>
+                </cards>
+            </cards54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <cards60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c56
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c59>
+                </cards>
+            </cards60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <cards66
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ff8040"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" color2="#0080ff" colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c64>
+                    <c65
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c65>
+                </cards>
+            </cards66>
+            <title67 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title67>
+            <cards72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c68
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c69>
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c71>
+                </cards>
+            </cards72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <cards78
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c76>
+                    <c77
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c77>
+                </cards>
+            </cards78>
+            <title79 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title79>
+            <cards84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c80
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c80>
+                    <c81
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c81>
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c83>
+                </cards>
+            </cards84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title85>
+            <cards90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c89>
+                </cards>
+            </cards90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <cards96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c95>
+                </cards>
+            </cards96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Cards - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <cards102
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c99>
+                    <c100
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c100>
+                    <c101
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c101>
+                </cards>
+            </cards102>
+            <title103 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title103>
+            <cards108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false"
+                colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c104
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c104>
+                    <c105
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c107>
+                </cards>
+            </cards108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title109>
+            <cards114
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c111>
+                    <c112
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c113>
+                </cards>
+            </cards114>
+            <title115 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title115>
+            <cards120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c116
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c119>
+                </cards>
+            </cards120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <cards126
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c124>
+                    <c125
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c125>
+                </cards>
+            </cards126>
+            <title127 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title127>
+            <cards132
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false"
+                colorscheme="" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c128
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c129>
+                    <c130
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c130>
+                    <c131
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c131>
+                </cards>
+            </cards132>
+            <title133 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title133>
+            <cards138
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="false"
+                colorscheme="" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c134
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c134>
+                    <c135
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c136>
+                    <c137
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c137>
+                </cards>
+            </cards138>
+            <title139 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title139>
+            <cards144
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c140
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c140>
+                    <c141
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c141>
+                    <c142
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c143>
+                </cards>
+            </cards144>
+            <title145 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title145>
+            <cards150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c146
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c148>
+                    <c149
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c149>
+                </cards>
+            </cards150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <cards156
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c154>
+                    <c155
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c155>
+                </cards>
+            </cards156>
+            <title157 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title157>
+            <cards162
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c158
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c159>
+                    <c160
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c160>
+                    <c161
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c161>
+                </cards>
+            </cards162>
+            <title163 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title163>
+            <cards168
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c164
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c164>
+                    <c165
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c166>
+                    <c167
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c167>
+                </cards>
+            </cards168>
+            <title169 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title169>
+            <cards174
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff"
+                bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20"
+                customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+                <cards jcr:primaryType="nt:unstructured">
+                    <c170
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/organized-small.jpg"
+                        imagealttext="Organized rope hanging on a winch"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor."
+                        title="Card One">
+                    </c170>
+                    <c171
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg"
+                        imagealttext="Several sets of rope"
+                        text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis."
+                        title="Card Two">
+                    </c171>
+                    <c172
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/close-up-cordage.jpg"
+                        imagealttext="Messy pile of rope"
+                        text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis."
+                        title="Card Three">
+                    </c172>
+                    <c173
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View"
+                        buttoncolor="primary" buttonsize="default" buttonalign="center"
+                        image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg"
+                        imagealttext="Tying a sailor knot"
+                        text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati."
+                        title="Card Four">
+                    </c173>
+                </cards>
+            </cards174>
+        </container175>
+        <pager176
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Cards - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title169><cards174
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/cards" bgcolor="#ffffff" bottompadding="20" showbutton="true" showtext="true" showtitle="true" showcard="true" toppadding="20" customcardcolor="false" roundedcorners="large" cardcolor="#ffffff" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><cards jcr:primaryType="nt:unstructured"><c170
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/organized-small.jpg" imagealttext="Organized rope hanging on a winch" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor." title="Card One">
-        </c170><c171
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/boat-rope-hanging-knot_small.jpg" imagealttext="Several sets of rope" text="Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis." title="Card Two">
-        </c171><c172
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/close-up-cordage.jpg" imagealttext="Messy pile of rope" text="Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis." title="Card Three">
-        </c172><c173
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="View" buttoncolor="primary" buttonsize="default" buttonalign="center" image="/content/themecleanflex/assets/samples/chain-close-up-daylight-1170601.jpg" imagealttext="Tying a sailor knot" text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati." title="Card Four">
-        </c173></cards>
-        </cards174>
-        </container175><pager176
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager176>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/.content.xml
index 68f571884..af3b9521e 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | carousel"
-            jcr:description="carousel themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | carousel"
+          jcr:description="carousel themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,149 +12,220 @@
         description="carousel themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container22
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container22
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;carousel&quot;&gt;Carousel&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;carousel&quot;&gt;Carousel&lt;/h1&gt;
 &lt;p&gt;The Carousel components is used for displaying a slideshow of images.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel (Features)&lt;/h2&gt;">
-        </title2><carousel3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl (Features)&lt;/h2&gt;">
-        </title4><carousel9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="none" indicators="false" autoplay="true" wrap="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c8></slides>
-        </carousel9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE (.hidden)&lt;/h2&gt;">
-        </title10><carousel14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c11
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c11><c12
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c13></slides>
-        </carousel14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example (Features)&lt;/h2&gt;">
-        </title15><carousel19
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c16
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c18></slides>
-        </carousel19><title20 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel (Features)&lt;/h2&gt;">
+            </title2>
+            <carousel3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel - Owl (Features)&lt;/h2&gt;">
+            </title4>
+            <carousel9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="none" indicators="false" autoplay="true" wrap="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c8>
+                </slides>
+            </carousel9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE (.hidden)&lt;/h2&gt;">
+            </title10>
+            <carousel14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c11
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c11>
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c13>
+                </slides>
+            </carousel14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example (Features)&lt;/h2&gt;">
+            </title15>
+            <carousel19
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c16
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c18>
+                </slides>
+            </carousel19>
+            <title20 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel empty (Empty)&lt;/h2&gt;">
+            </title20>
+            <carousel21
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel21>
+        </container22>
+        <pager23
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel empty (Empty)&lt;/h2&gt;">
-        </title20><carousel21
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel21>
-        </container22><pager23
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager23>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-blank/.content.xml
index 95dcc8260..e36459dc5 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | carouselsample-blank"
-            jcr:description="carouselsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | carouselsample-blank"
+          jcr:description="carouselsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="carouselsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><carousel2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><carousel4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><carousel6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><carousel8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><carousel10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><carousel12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><carousel14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><carousel16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><carousel18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><carousel20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><carousel22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><carousel24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><carousel26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><carousel28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><carousel30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><carousel32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><carousel34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><carousel36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="dark" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><carousel38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="dark" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><carousel40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="light" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><carousel42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="light" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><carousel44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><carousel46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><carousel48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><carousel50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><carousel52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><carousel54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><carousel56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <carousel2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <carousel4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <carousel6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <carousel8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <carousel10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <carousel12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <carousel14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <carousel16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <carousel18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <carousel20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <carousel22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <carousel24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <carousel26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <carousel28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <carousel30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <carousel32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <carousel34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <carousel36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <carousel38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <carousel40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <carousel42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <carousel44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <carousel46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <carousel48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <carousel50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <carousel52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <carousel54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <carousel56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <carousel58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <slides jcr:primaryType="nt:unstructured"></slides>
+            </carousel58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><carousel58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><slides jcr:primaryType="nt:unstructured"></slides>
-        </carousel58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-owl/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-owl/.content.xml
index 293ed2487..c0bc25114 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-owl/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-owl/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | carouselsample-owl"
-            jcr:description="carouselsample-owl themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | carouselsample-owl"
+          jcr:description="carouselsample-owl themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,694 +12,1058 @@
         description="carouselsample-owl themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container175
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><carousel6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c5></slides>
-        </carousel6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><carousel12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c8
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c11></slides>
-        </carousel12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><carousel18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c17></slides>
-        </carousel18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><carousel24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c20
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c20><c21
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c21><c22
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c23></slides>
-        </carousel24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><carousel30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c29></slides>
-        </carousel30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><carousel36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c35></slides>
-        </carousel36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><carousel42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c39><c40
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c40><c41
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c41></slides>
-        </carousel42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><carousel48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c44
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c44><c45
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c47></slides>
-        </carousel48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><carousel54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c51><c52
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c53></slides>
-        </carousel54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><carousel60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c56
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c59></slides>
-        </carousel60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><carousel66
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c64><c65
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c65></slides>
-        </carousel66><title67 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title67><carousel72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c68
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c69><c70
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c71></slides>
-        </carousel72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><carousel78
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c76><c77
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c77></slides>
-        </carousel78><title79 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title79><carousel84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c80
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c80><c81
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c81><c82
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c83></slides>
-        </carousel84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title85><carousel90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c89></slides>
-        </carousel90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><carousel96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c95></slides>
-        </carousel96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><carousel102
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c99><c100
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c100><c101
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c101></slides>
-        </carousel102><title103 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title103><carousel108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="false" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c104
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c104><c105
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c107></slides>
-        </carousel108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title109><carousel114
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="false" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c111><c112
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c113></slides>
-        </carousel114><title115 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title115><carousel120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="false" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c116
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c119></slides>
-        </carousel120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><carousel126
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="false" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c124><c125
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c125></slides>
-        </carousel126><title127 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title127><carousel132
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="false" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c128
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c129><c130
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c130><c131
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c131></slides>
-        </carousel132><title133 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title133><carousel138
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="false" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c134
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c134><c135
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c136><c137
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c137></slides>
-        </carousel138><title139 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title139><carousel144
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c140
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c140><c141
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c141><c142
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c143></slides>
-        </carousel144><title145 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title145><carousel150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c146
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c148><c149
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c149></slides>
-        </carousel150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><carousel156
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c154><c155
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c155></slides>
-        </carousel156><title157 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title157><carousel162
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c158
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c159><c160
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c160><c161
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c161></slides>
-        </carousel162><title163 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title163><carousel168
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c164
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c164><c165
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c166><c167
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c167></slides>
-        </carousel168><title169 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container175
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <carousel6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c4>
+                    <c5
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c5>
+                </slides>
+            </carousel6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <carousel12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c8
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c11>
+                </slides>
+            </carousel12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <carousel18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c17>
+                </slides>
+            </carousel18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <carousel24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c20
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c20>
+                    <c21
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c21>
+                    <c22
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c23>
+                </slides>
+            </carousel24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <carousel30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c29>
+                </slides>
+            </carousel30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <carousel36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c35>
+                </slides>
+            </carousel36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <carousel42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c39>
+                    <c40
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c40>
+                    <c41
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c41>
+                </slides>
+            </carousel42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <carousel48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c44
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c44>
+                    <c45
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c47>
+                </slides>
+            </carousel48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <carousel54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c51>
+                    <c52
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c53>
+                </slides>
+            </carousel54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <carousel60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c56
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c59>
+                </slides>
+            </carousel60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <carousel66
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c64>
+                    <c65
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c65>
+                </slides>
+            </carousel66>
+            <title67 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title67>
+            <carousel72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c68
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c69>
+                    <c70
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c71>
+                </slides>
+            </carousel72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <carousel78
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c76>
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c77>
+                </slides>
+            </carousel78>
+            <title79 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title79>
+            <carousel84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c80
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c80>
+                    <c81
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c81>
+                    <c82
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c83>
+                </slides>
+            </carousel84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title85>
+            <carousel90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c89>
+                </slides>
+            </carousel90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <carousel96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c95>
+                </slides>
+            </carousel96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Owl Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <carousel102
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c99>
+                    <c100
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c100>
+                    <c101
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c101>
+                </slides>
+            </carousel102>
+            <title103 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title103>
+            <carousel108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="false" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c104
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c104>
+                    <c105
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c107>
+                </slides>
+            </carousel108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title109>
+            <carousel114
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="false" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c111>
+                    <c112
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c113>
+                </slides>
+            </carousel114>
+            <title115 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title115>
+            <carousel120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="false" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c116
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c119>
+                </slides>
+            </carousel120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <carousel126
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="false" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c124>
+                    <c125
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c125>
+                </slides>
+            </carousel126>
+            <title127 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title127>
+            <carousel132
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="false" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c128
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c129>
+                    <c130
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c130>
+                    <c131
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c131>
+                </slides>
+            </carousel132>
+            <title133 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title133>
+            <carousel138
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="false" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c134
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c134>
+                    <c135
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c136>
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c137>
+                </slides>
+            </carousel138>
+            <title139 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title139>
+            <carousel144
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c140
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c140>
+                    <c141
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c141>
+                    <c142
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c143>
+                </slides>
+            </carousel144>
+            <title145 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title145>
+            <carousel150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="dark" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c146
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c148>
+                    <c149
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c149>
+                </slides>
+            </carousel150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <carousel156
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c154>
+                    <c155
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c155>
+                </slides>
+            </carousel156>
+            <title157 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title157>
+            <carousel162
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="light" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c158
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c159>
+                    <c160
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c160>
+                    <c161
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c161>
+                </slides>
+            </carousel162>
+            <title163 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title163>
+            <carousel168
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c164
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c164>
+                    <c165
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c166>
+                    <c167
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c167>
+                </slides>
+            </carousel168>
+            <title169 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title169>
+            <carousel174
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c170
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
+                    </c170>
+                    <c171
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
+                    </c171>
+                    <c172
+                        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
+                    </c172>
+                    <c173
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
+                    </c173>
+                </slides>
+            </carousel174>
+        </container175>
+        <pager176
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Owl Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title169><carousel174
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="article" captionbg="true" colorscheme="" indicators="false" autoplay="true" wrap="true" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<itemsperpage jcr:primaryType="nt:unstructured"></itemsperpage>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c170
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/google.svg">
-        </c170><c171
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/facebook.svg">
-        </c171><c172
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/linkedin.svg">
-        </c172><c173
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/icons/pinterest.svg">
-        </c173></slides>
-        </carousel174>
-        </container175><pager176
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager176>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-rte/.content.xml
index bd0fa9468..4e0144d11 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | carouselsample-rte"
-            jcr:description="carouselsample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | carouselsample-rte"
+          jcr:description="carouselsample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,607 +12,1179 @@
         description="carouselsample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><carousel5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c4></slides>
-        </carousel5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><carousel10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c9></slides>
-        </carousel10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><carousel15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c14></slides>
-        </carousel15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><carousel20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c19></slides>
-        </carousel20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><carousel25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c24></slides>
-        </carousel25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><carousel30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c29></slides>
-        </carousel30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><carousel35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c34></slides>
-        </carousel35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><carousel40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c39></slides>
-        </carousel40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><carousel45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c44></slides>
-        </carousel45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><carousel50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c49></slides>
-        </carousel50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><carousel55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c54></slides>
-        </carousel55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><carousel60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c59></slides>
-        </carousel60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><carousel65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c64></slides>
-        </carousel65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><carousel70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c69></slides>
-        </carousel70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><carousel75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c74></slides>
-        </carousel75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><carousel80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c79></slides>
-        </carousel80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><carousel85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c84></slides>
-        </carousel85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><carousel90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="dark" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c89></slides>
-        </carousel90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><carousel95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="dark" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c94></slides>
-        </carousel95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><carousel100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="light" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c99></slides>
-        </carousel100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><carousel105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="light" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c104></slides>
-        </carousel105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><carousel110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c109></slides>
-        </carousel110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><carousel115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="false" colorscheme="" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c114></slides>
-        </carousel115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><carousel120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c119></slides>
-        </carousel120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><carousel125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c124></slides>
-        </carousel125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><carousel130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c129></slides>
-        </carousel130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><carousel135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c134></slides>
-        </carousel135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><carousel140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c139></slides>
-        </carousel140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <carousel5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c4>
+                </slides>
+            </carousel5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <carousel10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c9>
+                </slides>
+            </carousel10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <carousel15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c14>
+                </slides>
+            </carousel15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <carousel20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c19>
+                </slides>
+            </carousel20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <carousel25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c24>
+                </slides>
+            </carousel25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <carousel30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c29>
+                </slides>
+            </carousel30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <carousel35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c34>
+                </slides>
+            </carousel35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <carousel40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c39>
+                </slides>
+            </carousel40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <carousel45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c44>
+                </slides>
+            </carousel45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <carousel50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c49>
+                </slides>
+            </carousel50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <carousel55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c54>
+                </slides>
+            </carousel55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <carousel60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c59>
+                </slides>
+            </carousel60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <carousel65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c64>
+                </slides>
+            </carousel65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <carousel70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c69>
+                </slides>
+            </carousel70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <carousel75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c74>
+                </slides>
+            </carousel75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <carousel80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c79>
+                </slides>
+            </carousel80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <carousel85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c84>
+                </slides>
+            </carousel85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <carousel90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c89>
+                </slides>
+            </carousel90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <carousel95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c94>
+                </slides>
+            </carousel95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <carousel100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c99>
+                </slides>
+            </carousel100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <carousel105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c104>
+                </slides>
+            </carousel105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <carousel110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c109>
+                </slides>
+            </carousel110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <carousel115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="false" colorscheme="" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c114>
+                </slides>
+            </carousel115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <carousel120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c119>
+                </slides>
+            </carousel120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <carousel125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c124>
+                </slides>
+            </carousel125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <carousel130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c129>
+                </slides>
+            </carousel130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <carousel135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c134>
+                </slides>
+            </carousel135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <carousel140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c139>
+                </slides>
+            </carousel140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <carousel145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboat sailing on a lake">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+                        alt="Sailboats sailing on an ocean">
+                    </c144>
+                </slides>
+            </carousel145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel With Full RTE Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><carousel145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboat sailing on a lake">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " alt="Sailboats sailing on an ocean">
-        </c144></slides>
-        </carousel145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample/.content.xml
index a44aff237..a539a3fdc 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/carousel/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | carouselsample"
-            jcr:description="carouselsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | carouselsample"
+          jcr:description="carouselsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,607 +12,1185 @@
         description="carouselsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><carousel5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c4></slides>
-        </carousel5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><carousel10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c9></slides>
-        </carousel10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><carousel15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c14></slides>
-        </carousel15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><carousel20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c19></slides>
-        </carousel20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><carousel25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c24></slides>
-        </carousel25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><carousel30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c29></slides>
-        </carousel30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><carousel35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c34></slides>
-        </carousel35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><carousel40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c39></slides>
-        </carousel40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><carousel45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c44></slides>
-        </carousel45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><carousel50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c49></slides>
-        </carousel50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><carousel55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c54></slides>
-        </carousel55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><carousel60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c59></slides>
-        </carousel60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><carousel65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c64></slides>
-        </carousel65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><carousel70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c69></slides>
-        </carousel70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><carousel75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c74></slides>
-        </carousel75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><carousel80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c79></slides>
-        </carousel80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><carousel85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c84></slides>
-        </carousel85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><carousel90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="false" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c89></slides>
-        </carousel90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><carousel95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="false" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c94></slides>
-        </carousel95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><carousel100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="false" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c99></slides>
-        </carousel100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><carousel105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="false" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c104></slides>
-        </carousel105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><carousel110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="false" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c109></slides>
-        </carousel110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><carousel115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="false" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c114></slides>
-        </carousel115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><carousel120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c119></slides>
-        </carousel120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><carousel125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c124></slides>
-        </carousel125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><carousel130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c129></slides>
-        </carousel130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><carousel135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c134></slides>
-        </carousel135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><carousel140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c139></slides>
-        </carousel140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <carousel5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c4>
+                </slides>
+            </carousel5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <carousel10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c9>
+                </slides>
+            </carousel10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <carousel15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c14>
+                </slides>
+            </carousel15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <carousel20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c19>
+                </slides>
+            </carousel20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <carousel25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c24>
+                </slides>
+            </carousel25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <carousel30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c29>
+                </slides>
+            </carousel30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <carousel35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c34>
+                </slides>
+            </carousel35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <carousel40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c39>
+                </slides>
+            </carousel40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <carousel45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c44>
+                </slides>
+            </carousel45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <carousel50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c49>
+                </slides>
+            </carousel50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <carousel55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c54>
+                </slides>
+            </carousel55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <carousel60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c59>
+                </slides>
+            </carousel60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <carousel65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c64>
+                </slides>
+            </carousel65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <carousel70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c69>
+                </slides>
+            </carousel70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <carousel75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c74>
+                </slides>
+            </carousel75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <carousel80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c79>
+                </slides>
+            </carousel80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <carousel85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c84>
+                </slides>
+            </carousel85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <carousel90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="false" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c89>
+                </slides>
+            </carousel90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <carousel95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="false" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c94>
+                </slides>
+            </carousel95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <carousel100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="false" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c99>
+                </slides>
+            </carousel100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <carousel105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="false" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c104>
+                </slides>
+            </carousel105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <carousel110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="false" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c109>
+                </slides>
+            </carousel110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <carousel115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="false" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c114>
+                </slides>
+            </carousel115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <carousel120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c119>
+                </slides>
+            </carousel120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <carousel125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="dark" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c124>
+                </slides>
+            </carousel125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <carousel130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c129>
+                </slides>
+            </carousel130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <carousel135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="light" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c134>
+                </slides>
+            </carousel135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <carousel140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c139>
+                </slides>
+            </carousel140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <carousel145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel"
+                blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
+                <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+                <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+                <slides jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg"
+                        imagefit="cover"
+                        text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;"
+                        alt="Sailboats in front of city skyline and sunset">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboat sailing on a lake">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover"
+                        text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;"
+                        alt="Sailboats sailing on an ocean">
+                    </c144>
+                </slides>
+            </carousel145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Carousel - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><carousel145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/carousel" blockwidth="full" captionbg="true" colorscheme="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><carouselheight jcr:primaryType="nt:unstructured"></carouselheight>
-<toppadding jcr:primaryType="nt:unstructured"></toppadding>
-<bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-<slides jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/architecture-blue-skies_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide One Title&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.&lt;/p&gt;" alt="Sailboats in front of city skyline and sunset">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Two Title&lt;/h2&gt;&lt;p&gt;Maecenas fermentum neque feugiat purus condimentum, sed molestie dolor fermentum. Nullam vestibulum tellus dolor. Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboat sailing on a lake">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" imagepath="/content/themecleanflex/assets/samples/beach-boats-ocean_large.jpg" imagefit="cover" text="&lt;h2&gt;Slide Three Title&lt;/h2&gt;&lt;p&gt;Fusce sagittis, est eget commodo imperdiet, lectus quam bibendum ex, eu commodo mi diam molestie tortor.Cras viverra vel diam quis iaculis.&lt;/p&gt;" alt="Sailboats sailing on an ocean">
-        </c144></slides>
-        </carousel145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/.content.xml
index a50d0bb8d..7c80ccfbd 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | code"
-            jcr:description="code themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | code"
+          jcr:description="code themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,43 +12,53 @@
         description="code themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container6
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container6
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;code&quot;&gt;Code&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;code&quot;&gt;Code&lt;/h1&gt;
 &lt;p&gt;This component renders the text as &lt;code&gt;&amp;lt;pre&amp;gt;&amp;lt;code class=&amp;quot;language-{{language}} {{classes}}&amp;quot;&amp;gt;{{text}}&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;&lt;/code&gt;&lt;/p&gt;
 &lt;p&gt;If the base template includes prism.js it will be used to generate the markup of the code. &lt;/p&gt;
 &lt;h2 id=&quot;configuring-prism&quot;&gt;Configuring Prism&lt;/h2&gt;
@@ -77,50 +88,66 @@
 &lt;li&gt;Update the code component to be less plugin dependent&lt;/li&gt;
 &lt;/ul&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code (Text Components)&lt;/h2&gt;">
-        </title2><code3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="">
-        </code3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code (Text Components)&lt;/h2&gt;">
+            </title2>
+            <code3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="">
+            </code3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code - Example (Text Components)&lt;/h2&gt;">
+            </title4>
+            <code5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript">
+            </code5>
+        </container6>
+        <pager7
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example (Text Components)&lt;/h2&gt;">
-        </title4><code5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript">
-        </code5>
-        </container6><pager7
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager7>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample-blank/.content.xml
index 30c951c84..ed5bf2eae 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | codesample-blank"
-            jcr:description="codesample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | codesample-blank"
+          jcr:description="codesample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="codesample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><code2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </code2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><code4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </code4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><code6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </code6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><code8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </code8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><code10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </code10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><code12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </code12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><code14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </code14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><code16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </code16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><code18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </code18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><code20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </code20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><code22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </code22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><code24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </code24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><code26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </code26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><code28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </code28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><code30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </code30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><code32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </code32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><code34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </code34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><code36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="false" colorscheme="dark" fullheight="false">
-        </code36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><code38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="false" colorscheme="dark" fullheight="true">
-        </code38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><code40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="false" colorscheme="light" fullheight="false">
-        </code40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><code42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="false" colorscheme="light" fullheight="true">
-        </code42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><code44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="false" colorscheme="" fullheight="false">
-        </code44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><code46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="false" colorscheme="" fullheight="true">
-        </code46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><code48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </code48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><code50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </code50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><code52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </code52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><code54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </code54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><code56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </code56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <code2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="dark" fullheight="true">
+            </code2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <code4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="false">
+            </code4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <code6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="true">
+            </code6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <code8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="false">
+            </code8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <code10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="true">
+            </code10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <code12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="false">
+            </code12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <code14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="true">
+            </code14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <code16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="false">
+            </code16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <code18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="true">
+            </code18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <code20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="false">
+            </code20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <code22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="true">
+            </code22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <code24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </code24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <code26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </code26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <code28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </code28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <code30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </code30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <code32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </code32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <code34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </code34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <code36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="false" colorscheme="dark" fullheight="false">
+            </code36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <code38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="false" colorscheme="dark" fullheight="true">
+            </code38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <code40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="false" colorscheme="light" fullheight="false">
+            </code40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <code42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="false" colorscheme="light" fullheight="true">
+            </code42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <code44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="false" colorscheme="" fullheight="false">
+            </code44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <code46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="false" colorscheme="" fullheight="true">
+            </code46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <code48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </code48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <code50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </code50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <code52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </code52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <code54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </code54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <code56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </code56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <code58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text=""
+                language="" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </code58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><code58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="" language="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </code58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample/.content.xml
index 81cf3d4c9..702669e33 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/code/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | codesample"
-            jcr:description="codesample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | codesample"
+          jcr:description="codesample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="codesample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><code2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </code2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><code4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </code4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><code6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </code6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><code8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </code8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><code10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </code10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><code12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </code12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><code14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </code14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><code16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </code16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><code18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </code18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><code20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </code20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><code22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </code22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><code24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </code24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><code26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </code26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><code28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </code28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><code30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </code30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><code32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </code32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><code34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </code34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><code36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="false" colorscheme="dark" fullheight="false">
-        </code36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><code38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="false" colorscheme="dark" fullheight="true">
-        </code38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><code40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="false" colorscheme="light" fullheight="false">
-        </code40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><code42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="false" colorscheme="light" fullheight="true">
-        </code42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><code44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="false" colorscheme="" fullheight="false">
-        </code44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><code46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="false" colorscheme="" fullheight="true">
-        </code46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><code48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </code48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><code50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </code50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><code52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </code52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><code54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </code54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><code56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </code56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <code2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="dark" fullheight="true">
+            </code2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <code4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="false">
+            </code4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <code6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="true">
+            </code6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <code8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="false">
+            </code8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Code - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <code10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="true">
+            </code10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <code12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="false">
+            </code12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <code14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="true">
+            </code14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <code16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="false">
+            </code16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <code18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="true">
+            </code18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <code20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="false">
+            </code20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <code22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="true">
+            </code22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <code24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </code24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <code26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </code26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <code28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </code28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <code30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </code30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <code32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </code32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <code34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </code34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <code36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="false" colorscheme="dark" fullheight="false">
+            </code36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <code38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="false" colorscheme="dark" fullheight="true">
+            </code38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <code40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="false" colorscheme="light" fullheight="false">
+            </code40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <code42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="false" colorscheme="light" fullheight="true">
+            </code42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <code44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="false" colorscheme="" fullheight="false">
+            </code44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <code46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="false" colorscheme="" fullheight="true">
+            </code46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <code48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </code48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <code50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </code50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <code52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </code52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <code54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </code54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <code56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </code56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <code58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};"
+                language="javascript" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </code58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Code - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><code58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/code" text="var a = {};" language="javascript" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </code58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/.content.xml
index e48d65c72..1cb4b4f28 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | container"
-            jcr:description="container themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | container"
+          jcr:description="container themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,79 +12,101 @@
         description="container themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container4
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container4
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;container&quot;&gt;Container&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;container&quot;&gt;Container&lt;/h1&gt;
 &lt;p&gt;The container component is used by Peregrine cms to allow components to be dragged onto other components&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container (Chrome)&lt;/h2&gt;">
+            </title2>
+            <container3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container">
+            </container3>
+        </container4>
+        <pager5
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container (Chrome)&lt;/h2&gt;">
-        </title2><container3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container">
-        </container3>
-        </container4><pager5
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager5>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/sample/.content.xml
index f4bac0084..480b5329c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/container/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | containersample"
-            jcr:description="containersample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | containersample"
+          jcr:description="containersample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="containersample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><container2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </container2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><container4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </container4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><container6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </container6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><container8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </container8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><container10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </container10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><container12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </container12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><container14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </container14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><container16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </container16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><container18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </container18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><container20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </container20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><container22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </container22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><container24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </container24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><container26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </container26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><container28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </container28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><container30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </container30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><container32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </container32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><container34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </container34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><container36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="false" colorscheme="dark" fullheight="false">
-        </container36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><container38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="false" colorscheme="dark" fullheight="true">
-        </container38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><container40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="false" colorscheme="light" fullheight="false">
-        </container40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><container42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="false" colorscheme="light" fullheight="true">
-        </container42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><container44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="false" colorscheme="" fullheight="false">
-        </container44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><container46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="false" colorscheme="" fullheight="true">
-        </container46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><container48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </container48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><container50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </container50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><container52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </container52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><container54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </container54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><container56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </container56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <container2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </container2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <container4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </container4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <container6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </container6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <container8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </container8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <container10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </container10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <container12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </container12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <container14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </container14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <container16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </container16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <container18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </container18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <container20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </container20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <container22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </container22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <container24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </container24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <container26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </container26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <container28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </container28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <container30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </container30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <container32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </container32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <container34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </container34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <container36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </container36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <container38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </container38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <container40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </container40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <container42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </container42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <container44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="false" colorscheme="" fullheight="false">
+            </container44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <container46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="false" colorscheme="" fullheight="true">
+            </container46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <container48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </container48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <container50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </container50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <container52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </container52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <container54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </container54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <container56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </container56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <container58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </container58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><container58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/container" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </container58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/.content.xml
index 5d0a17b93..ffb5f816a 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | containerblock"
-            jcr:description="containerblock themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | containerblock"
+          jcr:description="containerblock themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,79 +12,101 @@
         description="containerblock themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container4
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container4
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;container-block&quot;&gt;Container Block&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;container-block&quot;&gt;Container Block&lt;/h1&gt;
 &lt;p&gt;The Container Block component is an empty block component that can be used with the nested containers as columns for finer control of layout.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Block (Chrome)&lt;/h2&gt;">
+            </title2>
+            <containerblock3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock">
+            </containerblock3>
+        </container4>
+        <pager5
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block (Chrome)&lt;/h2&gt;">
-        </title2><containerblock3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock">
-        </containerblock3>
-        </container4><pager5
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager5>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/sample/.content.xml
index b349d37b2..59560f7fe 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/containerblock/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | containerblocksample"
-            jcr:description="containerblocksample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | containerblocksample"
+          jcr:description="containerblocksample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="containerblocksample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><containerblock2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </containerblock2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><containerblock4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </containerblock4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><containerblock6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </containerblock6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><containerblock8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </containerblock8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><containerblock10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </containerblock10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><containerblock12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </containerblock12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><containerblock14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </containerblock14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><containerblock16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </containerblock16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><containerblock18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </containerblock18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><containerblock20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </containerblock20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><containerblock22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </containerblock22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><containerblock24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </containerblock24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><containerblock26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </containerblock26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><containerblock28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </containerblock28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><containerblock30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </containerblock30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><containerblock32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </containerblock32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><containerblock34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </containerblock34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><containerblock36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="false" colorscheme="dark" fullheight="false">
-        </containerblock36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><containerblock38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="false" colorscheme="dark" fullheight="true">
-        </containerblock38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><containerblock40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="false" colorscheme="light" fullheight="false">
-        </containerblock40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><containerblock42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="false" colorscheme="light" fullheight="true">
-        </containerblock42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><containerblock44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="false" colorscheme="" fullheight="false">
-        </containerblock44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><containerblock46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="false" colorscheme="" fullheight="true">
-        </containerblock46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><containerblock48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </containerblock48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><containerblock50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </containerblock50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><containerblock52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </containerblock52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><containerblock54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </containerblock54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><containerblock56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </containerblock56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <containerblock2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </containerblock2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <containerblock4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </containerblock4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <containerblock6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </containerblock6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <containerblock8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </containerblock8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Container Block Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <containerblock10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </containerblock10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <containerblock12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </containerblock12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <containerblock14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </containerblock14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <containerblock16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </containerblock16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <containerblock18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </containerblock18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <containerblock20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </containerblock20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <containerblock22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </containerblock22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <containerblock24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </containerblock24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <containerblock26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </containerblock26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <containerblock28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </containerblock28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <containerblock30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </containerblock30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <containerblock32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </containerblock32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <containerblock34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </containerblock34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <containerblock36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </containerblock36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <containerblock38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </containerblock38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <containerblock40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </containerblock40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <containerblock42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </containerblock42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <containerblock44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="false" colorscheme="" fullheight="false">
+            </containerblock44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <containerblock46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="false" colorscheme="" fullheight="true">
+            </containerblock46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <containerblock48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </containerblock48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <containerblock50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </containerblock50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <containerblock52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </containerblock52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <containerblock54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </containerblock54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <containerblock56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </containerblock56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <containerblock58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </containerblock58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Container Block Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><containerblock58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/containerblock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </containerblock58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/.content.xml
index 3a60d1978..e69460121 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | footer"
-            jcr:description="footer themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | footer"
+          jcr:description="footer themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,170 +12,268 @@
         description="footer themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container36
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container36
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;footer&quot;&gt;Footer&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;footer&quot;&gt;Footer&lt;/h1&gt;
 &lt;p&gt;The Footer component is a great way to display extra information or navigation related to your site.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer (Chrome)&lt;/h2&gt;">
-        </title2><footer3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light (Chrome)&lt;/h2&gt;">
-        </title4><footer13
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved"><columns jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c7></columns>
-<icons jcr:primaryType="nt:unstructured"><c8
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c11><c12
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c12></icons>
-        </footer13><title14 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles (.hidden)&lt;/h2&gt;">
-        </title14><footer23
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved"><columns jcr:primaryType="nt:unstructured"><c15
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c17></columns>
-<icons jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c19><c20
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c20><c21
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c21><c22
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c22></icons>
-        </footer23><title24 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark (Chrome)&lt;/h2&gt;">
-        </title24><footer33
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved"><columns jcr:primaryType="nt:unstructured"><c25
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c25><c26
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c27></columns>
-<icons jcr:primaryType="nt:unstructured"><c28
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c29><c30
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c31><c32
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c32></icons>
-        </footer33><title34 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer (Chrome)&lt;/h2&gt;">
+            </title2>
+            <footer3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer - light (Chrome)&lt;/h2&gt;">
+            </title4>
+            <footer13
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c7>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c8
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c11>
+                    <c12
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c12>
+                </icons>
+            </footer13>
+            <title14 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles (.hidden)&lt;/h2&gt;">
+            </title14>
+            <footer23
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c15
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c17>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c19>
+                    <c20
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c20>
+                    <c21
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c21>
+                    <c22
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c22>
+                </icons>
+            </footer23>
+            <title24 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark (Chrome)&lt;/h2&gt;">
+            </title24>
+            <footer33
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c25
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c25>
+                    <c26
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c27>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c28
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c29>
+                    <c30
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c31>
+                    <c32
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c32>
+                </icons>
+            </footer33>
+            <title34 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer no default values (Empty)&lt;/h2&gt;">
+            </title34>
+            <footer35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer35>
+        </container36>
+        <pager37
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer no default values (Empty)&lt;/h2&gt;">
-        </title34><footer35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer35>
-        </container36><pager37
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager37>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-blank/.content.xml
index 97e4544e6..5e56bbaaf 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | footersample-blank"
-            jcr:description="footersample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | footersample-blank"
+          jcr:description="footersample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="footersample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><footer2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><footer4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><footer6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><footer8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><footer10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><footer12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><footer14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><footer16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><footer18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><footer20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><footer22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><footer24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><footer26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><footer28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><footer30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><footer32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><footer34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><footer36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="false" colorscheme="dark" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><footer38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="false" colorscheme="dark" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><footer40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="false" colorscheme="light" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><footer42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="false" colorscheme="light" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><footer44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="false" colorscheme="" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><footer46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="false" colorscheme="" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><footer48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><footer50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><footer52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><footer54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><footer56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <footer2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <footer4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <footer6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <footer8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <footer10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <footer12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <footer14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <footer16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <footer18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <footer20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <footer22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <footer24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <footer26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <footer28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <footer30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <footer32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <footer34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <footer36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <footer38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <footer40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <footer42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <footer44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="false" colorscheme="" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <footer46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="false" colorscheme="" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <footer48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <footer50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <footer52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <footer54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <footer56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <footer58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <coluimns jcr:primaryType="nt:unstructured"></coluimns>
+            </footer58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><footer58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><coluimns jcr:primaryType="nt:unstructured"></coluimns>
-        </footer58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-light/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-light/.content.xml
index 452799196..046b2c1e2 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-light/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-light/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | footersample-light"
-            jcr:description="footersample-light themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | footersample-light"
+          jcr:description="footersample-light themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,839 +12,1585 @@
         description="footersample-light themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container291
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><footer10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c4></columns>
-<icons jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c9></icons>
-        </footer10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><footer20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c14></columns>
-<icons jcr:primaryType="nt:unstructured"><c15
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c19></icons>
-        </footer20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><footer30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c24></columns>
-<icons jcr:primaryType="nt:unstructured"><c25
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c25><c26
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c29></icons>
-        </footer30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><footer40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c34></columns>
-<icons jcr:primaryType="nt:unstructured"><c35
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c35><c36
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c36><c37
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c39></icons>
-        </footer40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><footer50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c44></columns>
-<icons jcr:primaryType="nt:unstructured"><c45
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c49></icons>
-        </footer50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><footer60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c54></columns>
-<icons jcr:primaryType="nt:unstructured"><c55
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c55><c56
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c59></icons>
-        </footer60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><footer70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c64></columns>
-<icons jcr:primaryType="nt:unstructured"><c65
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c65><c66
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c69></icons>
-        </footer70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title71><footer80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c74></columns>
-<icons jcr:primaryType="nt:unstructured"><c75
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c76><c77
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c79></icons>
-        </footer80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><footer90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c84></columns>
-<icons jcr:primaryType="nt:unstructured"><c85
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c85><c86
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c89></icons>
-        </footer90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><footer100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c94></columns>
-<icons jcr:primaryType="nt:unstructured"><c95
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c95><c96
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c96><c97
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c99></icons>
-        </footer100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><footer110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c104></columns>
-<icons jcr:primaryType="nt:unstructured"><c105
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c109></icons>
-        </footer110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title111><footer120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c114></columns>
-<icons jcr:primaryType="nt:unstructured"><c115
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c115><c116
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c119></icons>
-        </footer120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><footer130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c124></columns>
-<icons jcr:primaryType="nt:unstructured"><c125
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c125><c126
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c126><c127
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c129></icons>
-        </footer130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title131><footer140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c134></columns>
-<icons jcr:primaryType="nt:unstructured"><c135
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c136><c137
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c139></icons>
-        </footer140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><footer150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c144></columns>
-<icons jcr:primaryType="nt:unstructured"><c145
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c145><c146
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c148><c149
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c149></icons>
-        </footer150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><footer160
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c154></columns>
-<icons jcr:primaryType="nt:unstructured"><c155
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c155><c156
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c156><c157
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c157><c158
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c159></icons>
-        </footer160><title161 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title161><footer170
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c162
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c162><c163
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c163><c164
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c164></columns>
-<icons jcr:primaryType="nt:unstructured"><c165
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c166><c167
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c167><c168
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c168><c169
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c169></icons>
-        </footer170><title171 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title171><footer180
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c172
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c172><c173
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c173><c174
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c174></columns>
-<icons jcr:primaryType="nt:unstructured"><c175
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c175><c176
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c176><c177
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c177><c178
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c178><c179
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c179></icons>
-        </footer180><title181 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title181><footer190
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c182
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c182><c183
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c183><c184
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c184></columns>
-<icons jcr:primaryType="nt:unstructured"><c185
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c185><c186
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c186><c187
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c187><c188
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c188><c189
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c189></icons>
-        </footer190><title191 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title191><footer200
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c192
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c192><c193
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c193><c194
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c194></columns>
-<icons jcr:primaryType="nt:unstructured"><c195
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c195><c196
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c196><c197
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c197><c198
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c198><c199
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c199></icons>
-        </footer200><title201 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title201><footer210
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c202
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c202><c203
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c203><c204
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c204></columns>
-<icons jcr:primaryType="nt:unstructured"><c205
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c205><c206
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c206><c207
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c207><c208
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c208><c209
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c209></icons>
-        </footer210><title211 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title211><footer220
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c212
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c212><c213
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c213><c214
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c214></columns>
-<icons jcr:primaryType="nt:unstructured"><c215
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c215><c216
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c216><c217
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c217><c218
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c218><c219
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c219></icons>
-        </footer220><title221 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title221><footer230
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c222
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c222><c223
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c223><c224
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c224></columns>
-<icons jcr:primaryType="nt:unstructured"><c225
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c225><c226
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c226><c227
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c227><c228
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c228><c229
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c229></icons>
-        </footer230><title231 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title231><footer240
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c232
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c232><c233
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c233><c234
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c234></columns>
-<icons jcr:primaryType="nt:unstructured"><c235
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c235><c236
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c236><c237
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c237><c238
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c238><c239
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c239></icons>
-        </footer240><title241 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title241><footer250
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c242
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c242><c243
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c243><c244
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c244></columns>
-<icons jcr:primaryType="nt:unstructured"><c245
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c245><c246
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c246><c247
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c247><c248
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c248><c249
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c249></icons>
-        </footer250><title251 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title251><footer260
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c252
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c252><c253
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c253><c254
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c254></columns>
-<icons jcr:primaryType="nt:unstructured"><c255
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c255><c256
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c256><c257
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c257><c258
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c258><c259
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c259></icons>
-        </footer260><title261 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title261><footer270
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c262
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c262><c263
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c263><c264
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c264></columns>
-<icons jcr:primaryType="nt:unstructured"><c265
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c265><c266
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c266><c267
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c267><c268
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c268><c269
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c269></icons>
-        </footer270><title271 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title271><footer280
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c272
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c272><c273
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c273><c274
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c274></columns>
-<icons jcr:primaryType="nt:unstructured"><c275
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c275><c276
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c276><c277
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c277><c278
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c278><c279
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c279></icons>
-        </footer280><title281 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container291
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <footer10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c4>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c9>
+                </icons>
+            </footer10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <footer20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c14>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c15
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c19>
+                </icons>
+            </footer20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <footer30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c24>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c25
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c25>
+                    <c26
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c29>
+                </icons>
+            </footer30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <footer40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c34>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c35
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c35>
+                    <c36
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c36>
+                    <c37
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c39>
+                </icons>
+            </footer40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <footer50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c44>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c45
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c49>
+                </icons>
+            </footer50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <footer60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c54>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c55
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c55>
+                    <c56
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c59>
+                </icons>
+            </footer60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <footer70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c64>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c65
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c65>
+                    <c66
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c69>
+                </icons>
+            </footer70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title71>
+            <footer80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c74>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c75
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c76>
+                    <c77
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c79>
+                </icons>
+            </footer80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <footer90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c84>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c85
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c85>
+                    <c86
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c89>
+                </icons>
+            </footer90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <footer100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c94>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c95
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c95>
+                    <c96
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c96>
+                    <c97
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c99>
+                </icons>
+            </footer100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <footer110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c104>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c105
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c109>
+                </icons>
+            </footer110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title111>
+            <footer120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c114>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c115
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c115>
+                    <c116
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c119>
+                </icons>
+            </footer120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <footer130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c124>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c125
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c125>
+                    <c126
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c126>
+                    <c127
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c129>
+                </icons>
+            </footer130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title131>
+            <footer140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c134>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c135
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c136>
+                    <c137
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c139>
+                </icons>
+            </footer140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <footer150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c144>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c145
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c145>
+                    <c146
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c148>
+                    <c149
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c149>
+                </icons>
+            </footer150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <footer160
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c154>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c155
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c155>
+                    <c156
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c156>
+                    <c157
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c157>
+                    <c158
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c159>
+                </icons>
+            </footer160>
+            <title161 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title161>
+            <footer170
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c162
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c162>
+                    <c163
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c163>
+                    <c164
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c164>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c165
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c166>
+                    <c167
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c167>
+                    <c168
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c168>
+                    <c169
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c169>
+                </icons>
+            </footer170>
+            <title171 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title171>
+            <footer180
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c172
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c172>
+                    <c173
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c173>
+                    <c174
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c174>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c175
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c175>
+                    <c176
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c176>
+                    <c177
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c177>
+                    <c178
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c178>
+                    <c179
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c179>
+                </icons>
+            </footer180>
+            <title181 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title181>
+            <footer190
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c182
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c182>
+                    <c183
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c183>
+                    <c184
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c184>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c185
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c185>
+                    <c186
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c186>
+                    <c187
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c187>
+                    <c188
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c188>
+                    <c189
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c189>
+                </icons>
+            </footer190>
+            <title191 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title191>
+            <footer200
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c192
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c192>
+                    <c193
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c193>
+                    <c194
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c194>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c195
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c195>
+                    <c196
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c196>
+                    <c197
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c197>
+                    <c198
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c198>
+                    <c199
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c199>
+                </icons>
+            </footer200>
+            <title201 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title201>
+            <footer210
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c202
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c202>
+                    <c203
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c203>
+                    <c204
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c204>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c205
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c205>
+                    <c206
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c206>
+                    <c207
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c207>
+                    <c208
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c208>
+                    <c209
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c209>
+                </icons>
+            </footer210>
+            <title211 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title211>
+            <footer220
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c212
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c212>
+                    <c213
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c213>
+                    <c214
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c214>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c215
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c215>
+                    <c216
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c216>
+                    <c217
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c217>
+                    <c218
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c218>
+                    <c219
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c219>
+                </icons>
+            </footer220>
+            <title221 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title221>
+            <footer230
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c222
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c222>
+                    <c223
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c223>
+                    <c224
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c224>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c225
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c225>
+                    <c226
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c226>
+                    <c227
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c227>
+                    <c228
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c228>
+                    <c229
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c229>
+                </icons>
+            </footer230>
+            <title231 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title231>
+            <footer240
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c232
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c232>
+                    <c233
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c233>
+                    <c234
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c234>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c235
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c235>
+                    <c236
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c236>
+                    <c237
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c237>
+                    <c238
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c238>
+                    <c239
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c239>
+                </icons>
+            </footer240>
+            <title241 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title241>
+            <footer250
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c242
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c242>
+                    <c243
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c243>
+                    <c244
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c244>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c245
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c245>
+                    <c246
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c246>
+                    <c247
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c247>
+                    <c248
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c248>
+                    <c249
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c249>
+                </icons>
+            </footer250>
+            <title251 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title251>
+            <footer260
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c252
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c252>
+                    <c253
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c253>
+                    <c254
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c254>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c255
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c255>
+                    <c256
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c256>
+                    <c257
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c257>
+                    <c258
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c258>
+                    <c259
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c259>
+                </icons>
+            </footer260>
+            <title261 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title261>
+            <footer270
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c262
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c262>
+                    <c263
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c263>
+                    <c264
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c264>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c265
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c265>
+                    <c266
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c266>
+                    <c267
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c267>
+                    <c268
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c268>
+                    <c269
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c269>
+                </icons>
+            </footer270>
+            <title271 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title271>
+            <footer280
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c272
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c272>
+                    <c273
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c273>
+                    <c274
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c274>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c275
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c275>
+                    <c276
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c276>
+                    <c277
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c277>
+                    <c278
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c278>
+                    <c279
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c279>
+                </icons>
+            </footer280>
+            <title281 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title281>
+            <footer290
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c282
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c282>
+                    <c283
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c283>
+                    <c284
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c284>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c285
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c285>
+                    <c286
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c286>
+                    <c287
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c287>
+                    <c288
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c288>
+                    <c289
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c289>
+                </icons>
+            </footer290>
+        </container291>
+        <pager292
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - light Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title281><footer290
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c282
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c282><c283
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c283><c284
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c284></columns>
-<icons jcr:primaryType="nt:unstructured"><c285
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c285><c286
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c286><c287
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c287><c288
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c288><c289
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c289></icons>
-        </footer290>
-        </container291><pager292
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager292>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-rte/.content.xml
index 8215f828f..933ec57ba 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | footersample-rte"
-            jcr:description="footersample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | footersample-rte"
+          jcr:description="footersample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,839 +12,1585 @@
         description="footersample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container291
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><footer10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c4></columns>
-<icons jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c9></icons>
-        </footer10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><footer20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c14></columns>
-<icons jcr:primaryType="nt:unstructured"><c15
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c19></icons>
-        </footer20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><footer30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c24></columns>
-<icons jcr:primaryType="nt:unstructured"><c25
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c25><c26
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c29></icons>
-        </footer30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><footer40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c34></columns>
-<icons jcr:primaryType="nt:unstructured"><c35
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c35><c36
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c36><c37
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c39></icons>
-        </footer40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><footer50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c44></columns>
-<icons jcr:primaryType="nt:unstructured"><c45
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c49></icons>
-        </footer50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><footer60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c54></columns>
-<icons jcr:primaryType="nt:unstructured"><c55
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c55><c56
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c59></icons>
-        </footer60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><footer70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c64></columns>
-<icons jcr:primaryType="nt:unstructured"><c65
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c65><c66
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c69></icons>
-        </footer70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title71><footer80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c74></columns>
-<icons jcr:primaryType="nt:unstructured"><c75
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c76><c77
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c79></icons>
-        </footer80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><footer90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c84></columns>
-<icons jcr:primaryType="nt:unstructured"><c85
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c85><c86
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c89></icons>
-        </footer90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><footer100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c94></columns>
-<icons jcr:primaryType="nt:unstructured"><c95
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c95><c96
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c96><c97
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c99></icons>
-        </footer100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><footer110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c104></columns>
-<icons jcr:primaryType="nt:unstructured"><c105
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c109></icons>
-        </footer110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title111><footer120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c114></columns>
-<icons jcr:primaryType="nt:unstructured"><c115
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c115><c116
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c119></icons>
-        </footer120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><footer130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c124></columns>
-<icons jcr:primaryType="nt:unstructured"><c125
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c125><c126
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c126><c127
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c129></icons>
-        </footer130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title131><footer140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c134></columns>
-<icons jcr:primaryType="nt:unstructured"><c135
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c136><c137
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c139></icons>
-        </footer140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><footer150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c144></columns>
-<icons jcr:primaryType="nt:unstructured"><c145
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c145><c146
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c148><c149
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c149></icons>
-        </footer150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><footer160
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c154></columns>
-<icons jcr:primaryType="nt:unstructured"><c155
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c155><c156
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c156><c157
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c157><c158
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c159></icons>
-        </footer160><title161 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title161><footer170
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c162
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c162><c163
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c163><c164
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c164></columns>
-<icons jcr:primaryType="nt:unstructured"><c165
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c166><c167
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c167><c168
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c168><c169
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c169></icons>
-        </footer170><title171 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title171><footer180
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c172
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c172><c173
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c173><c174
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c174></columns>
-<icons jcr:primaryType="nt:unstructured"><c175
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c175><c176
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c176><c177
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c177><c178
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c178><c179
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c179></icons>
-        </footer180><title181 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title181><footer190
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c182
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c182><c183
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c183><c184
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c184></columns>
-<icons jcr:primaryType="nt:unstructured"><c185
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c185><c186
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c186><c187
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c187><c188
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c188><c189
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c189></icons>
-        </footer190><title191 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title191><footer200
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c192
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c192><c193
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c193><c194
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c194></columns>
-<icons jcr:primaryType="nt:unstructured"><c195
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c195><c196
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c196><c197
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c197><c198
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c198><c199
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c199></icons>
-        </footer200><title201 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title201><footer210
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c202
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c202><c203
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c203><c204
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c204></columns>
-<icons jcr:primaryType="nt:unstructured"><c205
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c205><c206
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c206><c207
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c207><c208
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c208><c209
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c209></icons>
-        </footer210><title211 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title211><footer220
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c212
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c212><c213
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c213><c214
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c214></columns>
-<icons jcr:primaryType="nt:unstructured"><c215
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c215><c216
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c216><c217
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c217><c218
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c218><c219
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c219></icons>
-        </footer220><title221 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title221><footer230
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c222
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c222><c223
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c223><c224
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c224></columns>
-<icons jcr:primaryType="nt:unstructured"><c225
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c225><c226
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c226><c227
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c227><c228
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c228><c229
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c229></icons>
-        </footer230><title231 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title231><footer240
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c232
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c232><c233
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c233><c234
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c234></columns>
-<icons jcr:primaryType="nt:unstructured"><c235
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c235><c236
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c236><c237
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c237><c238
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c238><c239
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c239></icons>
-        </footer240><title241 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title241><footer250
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c242
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c242><c243
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c243><c244
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c244></columns>
-<icons jcr:primaryType="nt:unstructured"><c245
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c245><c246
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c246><c247
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c247><c248
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c248><c249
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c249></icons>
-        </footer250><title251 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title251><footer260
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c252
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c252><c253
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c253><c254
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c254></columns>
-<icons jcr:primaryType="nt:unstructured"><c255
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c255><c256
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c256><c257
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c257><c258
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c258><c259
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c259></icons>
-        </footer260><title261 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title261><footer270
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c262
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c262><c263
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c263><c264
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c264></columns>
-<icons jcr:primaryType="nt:unstructured"><c265
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c265><c266
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c266><c267
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c267><c268
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c268><c269
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c269></icons>
-        </footer270><title271 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title271><footer280
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c272
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c272><c273
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c273><c274
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c274></columns>
-<icons jcr:primaryType="nt:unstructured"><c275
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c275><c276
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c276><c277
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c277><c278
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c278><c279
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c279></icons>
-        </footer280><title281 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container291
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <footer10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c4>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c9>
+                </icons>
+            </footer10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <footer20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c14>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c15
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c19>
+                </icons>
+            </footer20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <footer30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c24>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c25
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c25>
+                    <c26
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c29>
+                </icons>
+            </footer30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <footer40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c34>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c35
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c35>
+                    <c36
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c36>
+                    <c37
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c39>
+                </icons>
+            </footer40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <footer50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c44>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c45
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c49>
+                </icons>
+            </footer50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <footer60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c54>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c55
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c55>
+                    <c56
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c59>
+                </icons>
+            </footer60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <footer70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c64>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c65
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c65>
+                    <c66
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c69>
+                </icons>
+            </footer70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title71>
+            <footer80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c74>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c75
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c76>
+                    <c77
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c79>
+                </icons>
+            </footer80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <footer90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c84>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c85
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c85>
+                    <c86
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c89>
+                </icons>
+            </footer90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <footer100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c94>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c95
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c95>
+                    <c96
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c96>
+                    <c97
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c99>
+                </icons>
+            </footer100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <footer110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c104>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c105
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c109>
+                </icons>
+            </footer110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title111>
+            <footer120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c114>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c115
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c115>
+                    <c116
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c119>
+                </icons>
+            </footer120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <footer130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c124>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c125
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c125>
+                    <c126
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c126>
+                    <c127
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c129>
+                </icons>
+            </footer130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title131>
+            <footer140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c134>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c135
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c136>
+                    <c137
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c139>
+                </icons>
+            </footer140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <footer150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c144>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c145
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c145>
+                    <c146
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c148>
+                    <c149
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c149>
+                </icons>
+            </footer150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <footer160
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c154>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c155
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c155>
+                    <c156
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c156>
+                    <c157
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c157>
+                    <c158
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c159>
+                </icons>
+            </footer160>
+            <title161 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title161>
+            <footer170
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c162
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c162>
+                    <c163
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c163>
+                    <c164
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c164>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c165
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c166>
+                    <c167
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c167>
+                    <c168
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c168>
+                    <c169
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c169>
+                </icons>
+            </footer170>
+            <title171 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title171>
+            <footer180
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c172
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c172>
+                    <c173
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c173>
+                    <c174
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c174>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c175
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c175>
+                    <c176
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c176>
+                    <c177
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c177>
+                    <c178
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c178>
+                    <c179
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c179>
+                </icons>
+            </footer180>
+            <title181 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title181>
+            <footer190
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c182
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c182>
+                    <c183
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c183>
+                    <c184
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c184>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c185
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c185>
+                    <c186
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c186>
+                    <c187
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c187>
+                    <c188
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c188>
+                    <c189
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c189>
+                </icons>
+            </footer190>
+            <title191 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title191>
+            <footer200
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c192
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c192>
+                    <c193
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c193>
+                    <c194
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c194>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c195
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c195>
+                    <c196
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c196>
+                    <c197
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c197>
+                    <c198
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c198>
+                    <c199
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c199>
+                </icons>
+            </footer200>
+            <title201 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title201>
+            <footer210
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c202
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c202>
+                    <c203
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c203>
+                    <c204
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c204>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c205
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c205>
+                    <c206
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c206>
+                    <c207
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c207>
+                    <c208
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c208>
+                    <c209
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c209>
+                </icons>
+            </footer210>
+            <title211 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title211>
+            <footer220
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c212
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c212>
+                    <c213
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c213>
+                    <c214
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c214>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c215
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c215>
+                    <c216
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c216>
+                    <c217
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c217>
+                    <c218
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c218>
+                    <c219
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c219>
+                </icons>
+            </footer220>
+            <title221 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title221>
+            <footer230
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c222
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c222>
+                    <c223
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c223>
+                    <c224
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c224>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c225
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c225>
+                    <c226
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c226>
+                    <c227
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c227>
+                    <c228
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c228>
+                    <c229
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c229>
+                </icons>
+            </footer230>
+            <title231 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title231>
+            <footer240
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c232
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c232>
+                    <c233
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c233>
+                    <c234
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c234>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c235
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c235>
+                    <c236
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c236>
+                    <c237
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c237>
+                    <c238
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c238>
+                    <c239
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c239>
+                </icons>
+            </footer240>
+            <title241 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title241>
+            <footer250
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c242
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c242>
+                    <c243
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c243>
+                    <c244
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c244>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c245
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c245>
+                    <c246
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c246>
+                    <c247
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c247>
+                    <c248
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c248>
+                    <c249
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c249>
+                </icons>
+            </footer250>
+            <title251 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title251>
+            <footer260
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c252
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c252>
+                    <c253
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c253>
+                    <c254
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c254>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c255
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c255>
+                    <c256
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c256>
+                    <c257
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c257>
+                    <c258
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c258>
+                    <c259
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c259>
+                </icons>
+            </footer260>
+            <title261 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title261>
+            <footer270
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c262
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c262>
+                    <c263
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c263>
+                    <c264
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c264>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c265
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c265>
+                    <c266
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c266>
+                    <c267
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c267>
+                    <c268
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c268>
+                    <c269
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c269>
+                </icons>
+            </footer270>
+            <title271 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title271>
+            <footer280
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c272
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c272>
+                    <c273
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c273>
+                    <c274
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c274>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c275
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c275>
+                    <c276
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c276>
+                    <c277
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c277>
+                    <c278
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c278>
+                    <c279
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c279>
+                </icons>
+            </footer280>
+            <title281 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title281>
+            <footer290
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c282
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c282>
+                    <c283
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c283>
+                    <c284
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+                    </c284>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c285
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c285>
+                    <c286
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c286>
+                    <c287
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c287>
+                    <c288
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c288>
+                    <c289
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c289>
+                </icons>
+            </footer290>
+        </container291>
+        <pager292
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title281><footer290
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c282
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c282><c283
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c283><c284
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </c284></columns>
-<icons jcr:primaryType="nt:unstructured"><c285
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c285><c286
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c286><c287
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c287><c288
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c288><c289
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c289></icons>
-        </footer290>
-        </container291><pager292
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager292>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample/.content.xml
index 4718b1945..b549958c1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/footer/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | footersample"
-            jcr:description="footersample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | footersample"
+          jcr:description="footersample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,839 +12,1585 @@
         description="footersample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container291
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><footer10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c4></columns>
-<icons jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c9></icons>
-        </footer10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><footer20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c14></columns>
-<icons jcr:primaryType="nt:unstructured"><c15
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c19></icons>
-        </footer20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><footer30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c24></columns>
-<icons jcr:primaryType="nt:unstructured"><c25
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c25><c26
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c29></icons>
-        </footer30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><footer40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c34></columns>
-<icons jcr:primaryType="nt:unstructured"><c35
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c35><c36
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c36><c37
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c39></icons>
-        </footer40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><footer50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c44></columns>
-<icons jcr:primaryType="nt:unstructured"><c45
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c49></icons>
-        </footer50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><footer60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c54></columns>
-<icons jcr:primaryType="nt:unstructured"><c55
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c55><c56
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c59></icons>
-        </footer60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><footer70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c64></columns>
-<icons jcr:primaryType="nt:unstructured"><c65
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c65><c66
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c69></icons>
-        </footer70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title71><footer80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c74></columns>
-<icons jcr:primaryType="nt:unstructured"><c75
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c76><c77
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c79></icons>
-        </footer80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><footer90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c84></columns>
-<icons jcr:primaryType="nt:unstructured"><c85
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c85><c86
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c89></icons>
-        </footer90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><footer100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c94></columns>
-<icons jcr:primaryType="nt:unstructured"><c95
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c95><c96
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c96><c97
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c99></icons>
-        </footer100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><footer110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c104></columns>
-<icons jcr:primaryType="nt:unstructured"><c105
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c109></icons>
-        </footer110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title111><footer120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c114></columns>
-<icons jcr:primaryType="nt:unstructured"><c115
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c115><c116
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c119></icons>
-        </footer120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><footer130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c124></columns>
-<icons jcr:primaryType="nt:unstructured"><c125
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c125><c126
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c126><c127
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c129></icons>
-        </footer130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title131><footer140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c134></columns>
-<icons jcr:primaryType="nt:unstructured"><c135
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c136><c137
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c139></icons>
-        </footer140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><footer150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c144></columns>
-<icons jcr:primaryType="nt:unstructured"><c145
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c145><c146
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c148><c149
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c149></icons>
-        </footer150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><footer160
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c154></columns>
-<icons jcr:primaryType="nt:unstructured"><c155
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c155><c156
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c156><c157
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c157><c158
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c159></icons>
-        </footer160><title161 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title161><footer170
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c162
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c162><c163
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c163><c164
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c164></columns>
-<icons jcr:primaryType="nt:unstructured"><c165
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c166><c167
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c167><c168
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c168><c169
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c169></icons>
-        </footer170><title171 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title171><footer180
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c172
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c172><c173
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c173><c174
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c174></columns>
-<icons jcr:primaryType="nt:unstructured"><c175
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c175><c176
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c176><c177
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c177><c178
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c178><c179
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c179></icons>
-        </footer180><title181 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title181><footer190
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c182
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c182><c183
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c183><c184
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c184></columns>
-<icons jcr:primaryType="nt:unstructured"><c185
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c185><c186
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c186><c187
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c187><c188
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c188><c189
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c189></icons>
-        </footer190><title191 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title191><footer200
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c192
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c192><c193
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c193><c194
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c194></columns>
-<icons jcr:primaryType="nt:unstructured"><c195
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c195><c196
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c196><c197
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c197><c198
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c198><c199
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c199></icons>
-        </footer200><title201 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title201><footer210
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c202
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c202><c203
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c203><c204
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c204></columns>
-<icons jcr:primaryType="nt:unstructured"><c205
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c205><c206
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c206><c207
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c207><c208
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c208><c209
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c209></icons>
-        </footer210><title211 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title211><footer220
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c212
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c212><c213
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c213><c214
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c214></columns>
-<icons jcr:primaryType="nt:unstructured"><c215
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c215><c216
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c216><c217
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c217><c218
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c218><c219
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c219></icons>
-        </footer220><title221 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title221><footer230
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c222
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c222><c223
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c223><c224
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c224></columns>
-<icons jcr:primaryType="nt:unstructured"><c225
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c225><c226
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c226><c227
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c227><c228
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c228><c229
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c229></icons>
-        </footer230><title231 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title231><footer240
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c232
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c232><c233
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c233><c234
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c234></columns>
-<icons jcr:primaryType="nt:unstructured"><c235
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c235><c236
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c236><c237
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c237><c238
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c238><c239
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c239></icons>
-        </footer240><title241 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title241><footer250
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c242
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c242><c243
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c243><c244
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c244></columns>
-<icons jcr:primaryType="nt:unstructured"><c245
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c245><c246
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c246><c247
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c247><c248
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c248><c249
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c249></icons>
-        </footer250><title251 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title251><footer260
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c252
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c252><c253
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c253><c254
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c254></columns>
-<icons jcr:primaryType="nt:unstructured"><c255
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c255><c256
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c256><c257
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c257><c258
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c258><c259
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c259></icons>
-        </footer260><title261 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title261><footer270
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c262
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c262><c263
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c263><c264
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c264></columns>
-<icons jcr:primaryType="nt:unstructured"><c265
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c265><c266
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c266><c267
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c267><c268
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c268><c269
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c269></icons>
-        </footer270><title271 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title271><footer280
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false"><columns jcr:primaryType="nt:unstructured"><c272
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c272><c273
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c273><c274
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c274></columns>
-<icons jcr:primaryType="nt:unstructured"><c275
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c275><c276
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c276><c277
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c277><c278
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c278><c279
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c279></icons>
-        </footer280><title281 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container291
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <footer10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c4>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c9>
+                </icons>
+            </footer10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <footer20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c14>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c15
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c19>
+                </icons>
+            </footer20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <footer30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c24>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c25
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c25>
+                    <c26
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c29>
+                </icons>
+            </footer30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <footer40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c34>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c35
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c35>
+                    <c36
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c36>
+                    <c37
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c39>
+                </icons>
+            </footer40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <footer50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#ff80c0" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c44>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c45
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c49>
+                </icons>
+            </footer50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <footer60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c54>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c55
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c55>
+                    <c56
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c59>
+                </icons>
+            </footer60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <footer70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c64>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c65
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c65>
+                    <c66
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c69>
+                </icons>
+            </footer70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title71>
+            <footer80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c74>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c75
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c76>
+                    <c77
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c79>
+                </icons>
+            </footer80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <footer90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c84>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c85
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c85>
+                    <c86
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c89>
+                </icons>
+            </footer90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <footer100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c94>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c95
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c95>
+                    <c96
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c96>
+                    <c97
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c99>
+                </icons>
+            </footer100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <footer110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="gradient" bgcolor="#ff8040" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                color2="#0080ff" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c104>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c105
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c109>
+                </icons>
+            </footer110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title111>
+            <footer120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c114>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c115
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c115>
+                    <c116
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c119>
+                </icons>
+            </footer120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <footer130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c124>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c125
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c125>
+                    <c126
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c126>
+                    <c127
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c129>
+                </icons>
+            </footer130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title131>
+            <footer140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c134>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c135
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c136>
+                    <c137
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c139>
+                </icons>
+            </footer140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <footer150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c144>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c145
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c145>
+                    <c146
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c148>
+                    <c149
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c149>
+                </icons>
+            </footer150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <footer160
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c154>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c155
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c155>
+                    <c156
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c156>
+                    <c157
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c157>
+                    <c158
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c159>
+                </icons>
+            </footer160>
+            <title161 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title161>
+            <footer170
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="image" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c162
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c162>
+                    <c163
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c163>
+                    <c164
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c164>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c165
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c166>
+                    <c167
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c167>
+                    <c168
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c168>
+                    <c169
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c169>
+                </icons>
+            </footer170>
+            <title171 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title171>
+            <footer180
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c172
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c172>
+                    <c173
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c173>
+                    <c174
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c174>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c175
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c175>
+                    <c176
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c176>
+                    <c177
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c177>
+                    <c178
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c178>
+                    <c179
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c179>
+                </icons>
+            </footer180>
+            <title181 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title181>
+            <footer190
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c182
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c182>
+                    <c183
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c183>
+                    <c184
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c184>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c185
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c185>
+                    <c186
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c186>
+                    <c187
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c187>
+                    <c188
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c188>
+                    <c189
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c189>
+                </icons>
+            </footer190>
+            <title191 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title191>
+            <footer200
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c192
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c192>
+                    <c193
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c193>
+                    <c194
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c194>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c195
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c195>
+                    <c196
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c196>
+                    <c197
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c197>
+                    <c198
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c198>
+                    <c199
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c199>
+                </icons>
+            </footer200>
+            <title201 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title201>
+            <footer210
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c202
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c202>
+                    <c203
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c203>
+                    <c204
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c204>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c205
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c205>
+                    <c206
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c206>
+                    <c207
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c207>
+                    <c208
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c208>
+                    <c209
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c209>
+                </icons>
+            </footer210>
+            <title211 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title211>
+            <footer220
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c212
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c212>
+                    <c213
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c213>
+                    <c214
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c214>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c215
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c215>
+                    <c216
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c216>
+                    <c217
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c217>
+                    <c218
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c218>
+                    <c219
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c219>
+                </icons>
+            </footer220>
+            <title221 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title221>
+            <footer230
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="false" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c222
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c222>
+                    <c223
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c223>
+                    <c224
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c224>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c225
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c225>
+                    <c226
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c226>
+                    <c227
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c227>
+                    <c228
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c228>
+                    <c229
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c229>
+                </icons>
+            </footer230>
+            <title231 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title231>
+            <footer240
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c232
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c232>
+                    <c233
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c233>
+                    <c234
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c234>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c235
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c235>
+                    <c236
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c236>
+                    <c237
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c237>
+                    <c238
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c238>
+                    <c239
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c239>
+                </icons>
+            </footer240>
+            <title241 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title241>
+            <footer250
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="dark" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c242
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c242>
+                    <c243
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c243>
+                    <c244
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c244>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c245
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c245>
+                    <c246
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c246>
+                    <c247
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c247>
+                    <c248
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c248>
+                    <c249
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c249>
+                </icons>
+            </footer250>
+            <title251 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title251>
+            <footer260
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c252
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c252>
+                    <c253
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c253>
+                    <c254
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c254>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c255
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c255>
+                    <c256
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c256>
+                    <c257
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c257>
+                    <c258
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c258>
+                    <c259
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c259>
+                </icons>
+            </footer260>
+            <title261 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title261>
+            <footer270
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c262
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c262>
+                    <c263
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c263>
+                    <c264
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c264>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c265
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c265>
+                    <c266
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c266>
+                    <c267
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c267>
+                    <c268
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c268>
+                    <c269
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c269>
+                </icons>
+            </footer270>
+            <title271 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title271>
+            <footer280
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c272
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c272>
+                    <c273
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c273>
+                    <c274
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c274>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c275
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c275>
+                    <c276
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c276>
+                    <c277
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c277>
+                    <c278
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c278>
+                    <c279
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c279>
+                </icons>
+            </footer280>
+            <title281 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title281>
+            <footer290
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer"
+                htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30"
+                colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+                logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60"
+                copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+                <columns jcr:primaryType="nt:unstructured">
+                    <c282
+                        jcr:primaryType="nt:unstructured" title="" text="">
+                    </c282>
+                    <c283
+                        jcr:primaryType="nt:unstructured" title="Contact"
+                        text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
+                    </c283>
+                    <c284
+                        jcr:primaryType="nt:unstructured" title="Location"
+                        text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                    </c284>
+                </columns>
+                <icons jcr:primaryType="nt:unstructured">
+                    <c285
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c285>
+                    <c286
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c286>
+                    <c287
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c287>
+                    <c288
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c288>
+                    <c289
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c289>
+                </icons>
+            </footer290>
+        </container291>
+        <pager292
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Footer - Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title281><footer290
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="video" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="http://www.peregrine-cms.com" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2017 Peregrine - All Rights Reserved" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true"><columns jcr:primaryType="nt:unstructured"><c282
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c282><c283
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;email@email.com&lt;br&gt;1-800-888-8888&lt;/p&gt;">
-        </c283><c284
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;1234 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c284></columns>
-<icons jcr:primaryType="nt:unstructured"><c285
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c285><c286
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c286><c287
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c287><c288
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c288><c289
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c289></icons>
-        </footer290>
-        </container291><pager292
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager292>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/.content.xml
index 6dcfad0d8..02e835153 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | header"
-            jcr:description="header themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | header"
+          jcr:description="header themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,129 +12,181 @@
         description="header themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container18
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container18
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;header&quot;&gt;Header&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;header&quot;&gt;Header&lt;/h1&gt;
 &lt;p&gt;The Header component is used to display your logo and the main navigation section for your page. &lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header (Chrome)&lt;/h2&gt;">
-        </title2><header3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header">
-        </header3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark (Chrome)&lt;/h2&gt;">
-        </title4><header9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c7></links>
-<buttons jcr:primaryType="nt:unstructured"><c8
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c8></buttons>
-        </header9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light (Chrome)&lt;/h2&gt;">
-        </title10><header15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c11
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c11><c12
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c13></links>
-<buttons jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c14></buttons>
-        </header15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header (Chrome)&lt;/h2&gt;">
+            </title2>
+            <header3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header">
+            </header3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header - Dark (Chrome)&lt;/h2&gt;">
+            </title4>
+            <header9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c7>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c8
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c8>
+                </buttons>
+            </header9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light (Chrome)&lt;/h2&gt;">
+            </title10>
+            <header15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c11
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c11>
+                    <c12
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c13>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c14>
+                </buttons>
+            </header15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Header no default value (Empty)&lt;/h2&gt;">
+            </title16>
+            <header17
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header">
+            </header17>
+        </container18>
+        <pager19
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Header no default value (Empty)&lt;/h2&gt;">
-        </title16><header17
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header">
-        </header17>
-        </container18><pager19
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager19>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-blank/.content.xml
index 1df7ef9dc..65a33e129 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | headersample-blank"
-            jcr:description="headersample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | headersample-blank"
+          jcr:description="headersample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="headersample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><header2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </header2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><header4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </header4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><header6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </header6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><header8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </header8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><header10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </header10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><header12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </header12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><header14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </header14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><header16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </header16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><header18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </header18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><header20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </header20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><header22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </header22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><header24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </header24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><header26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </header26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><header28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </header28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><header30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </header30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><header32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </header32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><header34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </header34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><header36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="false" colorscheme="dark" fullheight="false">
-        </header36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><header38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="false" colorscheme="dark" fullheight="true">
-        </header38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><header40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="false" colorscheme="light" fullheight="false">
-        </header40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><header42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="false" colorscheme="light" fullheight="true">
-        </header42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><header44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="false" colorscheme="" fullheight="false">
-        </header44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><header46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="false" colorscheme="" fullheight="true">
-        </header46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><header48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </header48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><header50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </header50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><header52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </header52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><header54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </header54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><header56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </header56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <header2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </header2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <header4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </header4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <header6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </header6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <header8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </header8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <header10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </header10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <header12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </header12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <header14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </header14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <header16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </header16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <header18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </header18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <header20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </header20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <header22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </header22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <header24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </header24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <header26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </header26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <header28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </header28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <header30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </header30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <header32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </header32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <header34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </header34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <header36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </header36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <header38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </header38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <header40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </header40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <header42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </header42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <header44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="false" colorscheme="" fullheight="false">
+            </header44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <header46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="false" colorscheme="" fullheight="true">
+            </header46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <header48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </header48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <header50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </header50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <header52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </header52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <header54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </header54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <header56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </header56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <header58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </header58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><header58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </header58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-dark/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-dark/.content.xml
index 678cd8ba0..56d7b1b54 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-dark/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample-dark/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | headersample-dark"
-            jcr:description="headersample-dark themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | headersample-dark"
+          jcr:description="headersample-dark themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,636 +12,1104 @@
         description="headersample-dark themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container175
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><header6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c4></links>
-<buttons jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c5></buttons>
-        </header6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><header12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c8
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c10></links>
-<buttons jcr:primaryType="nt:unstructured"><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c11></buttons>
-        </header12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><header18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c16></links>
-<buttons jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c17></buttons>
-        </header18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><header24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c20
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c20><c21
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c21><c22
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c22></links>
-<buttons jcr:primaryType="nt:unstructured"><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c23></buttons>
-        </header24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><header30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c28></links>
-<buttons jcr:primaryType="nt:unstructured"><c29
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c29></buttons>
-        </header30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><header36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c34></links>
-<buttons jcr:primaryType="nt:unstructured"><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c35></buttons>
-        </header36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><header42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c39><c40
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c40></links>
-<buttons jcr:primaryType="nt:unstructured"><c41
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c41></buttons>
-        </header42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><header48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c44
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c44><c45
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c46></links>
-<buttons jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c47></buttons>
-        </header48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><header54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c51><c52
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c52></links>
-<buttons jcr:primaryType="nt:unstructured"><c53
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c53></buttons>
-        </header54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><header60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c56
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c58></links>
-<buttons jcr:primaryType="nt:unstructured"><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c59></buttons>
-        </header60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><header66
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c64></links>
-<buttons jcr:primaryType="nt:unstructured"><c65
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c65></buttons>
-        </header66><title67 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title67><header72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c68
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c69><c70
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c70></links>
-<buttons jcr:primaryType="nt:unstructured"><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c71></buttons>
-        </header72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><header78
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c76></links>
-<buttons jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c77></buttons>
-        </header78><title79 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title79><header84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c80
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c80><c81
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c81><c82
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c82></links>
-<buttons jcr:primaryType="nt:unstructured"><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c83></buttons>
-        </header84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title85><header90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c88></links>
-<buttons jcr:primaryType="nt:unstructured"><c89
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c89></buttons>
-        </header90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><header96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c94></links>
-<buttons jcr:primaryType="nt:unstructured"><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c95></buttons>
-        </header96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><header102
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c99><c100
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c100></links>
-<buttons jcr:primaryType="nt:unstructured"><c101
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c101></buttons>
-        </header102><title103 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title103><header108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="false" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c104
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c104><c105
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c106></links>
-<buttons jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c107></buttons>
-        </header108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title109><header114
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="false" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c111><c112
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c112></links>
-<buttons jcr:primaryType="nt:unstructured"><c113
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c113></buttons>
-        </header114><title115 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title115><header120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="false" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c116
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c118></links>
-<buttons jcr:primaryType="nt:unstructured"><c119
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c119></buttons>
-        </header120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><header126
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="false" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c124></links>
-<buttons jcr:primaryType="nt:unstructured"><c125
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c125></buttons>
-        </header126><title127 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title127><header132
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="false" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c128
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c129><c130
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c130></links>
-<buttons jcr:primaryType="nt:unstructured"><c131
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c131></buttons>
-        </header132><title133 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title133><header138
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="false" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c134
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c134><c135
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c136></links>
-<buttons jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c137></buttons>
-        </header138><title139 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title139><header144
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c140
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c140><c141
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c141><c142
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c142></links>
-<buttons jcr:primaryType="nt:unstructured"><c143
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c143></buttons>
-        </header144><title145 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title145><header150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c146
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c148></links>
-<buttons jcr:primaryType="nt:unstructured"><c149
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c149></buttons>
-        </header150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><header156
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c154></links>
-<buttons jcr:primaryType="nt:unstructured"><c155
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c155></buttons>
-        </header156><title157 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title157><header162
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c158
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c159><c160
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c160></links>
-<buttons jcr:primaryType="nt:unstructured"><c161
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c161></buttons>
-        </header162><title163 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title163><header168
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c164
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c164><c165
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c166></links>
-<buttons jcr:primaryType="nt:unstructured"><c167
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c167></buttons>
-        </header168><title169 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container175
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <header6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c4>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c5>
+                </buttons>
+            </header6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <header12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c8
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c10>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c11>
+                </buttons>
+            </header12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <header18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c16>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c17>
+                </buttons>
+            </header18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <header24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c20
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c20>
+                    <c21
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c21>
+                    <c22
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c22>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c23>
+                </buttons>
+            </header24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <header30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c28>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c29
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c29>
+                </buttons>
+            </header30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <header36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c34>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c35>
+                </buttons>
+            </header36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <header42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c39>
+                    <c40
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c40>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c41
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c41>
+                </buttons>
+            </header42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <header48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c44
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c44>
+                    <c45
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c46>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c47>
+                </buttons>
+            </header48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <header54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c51>
+                    <c52
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c52>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c53
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c53>
+                </buttons>
+            </header54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <header60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c56
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c58>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c59>
+                </buttons>
+            </header60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <header66
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c64>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c65
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c65>
+                </buttons>
+            </header66>
+            <title67 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title67>
+            <header72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c68
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c69>
+                    <c70
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c70>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c71>
+                </buttons>
+            </header72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <header78
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c76>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c77>
+                </buttons>
+            </header78>
+            <title79 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title79>
+            <header84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c80
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c80>
+                    <c81
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c81>
+                    <c82
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c82>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c83>
+                </buttons>
+            </header84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title85>
+            <header90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c88>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c89
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c89>
+                </buttons>
+            </header90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <header96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c94>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c95>
+                </buttons>
+            </header96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <header102
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c99>
+                    <c100
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c100>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c101
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c101>
+                </buttons>
+            </header102>
+            <title103 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title103>
+            <header108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="false" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c104
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c104>
+                    <c105
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c106>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c107>
+                </buttons>
+            </header108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title109>
+            <header114
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="false" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c111>
+                    <c112
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c112>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c113
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c113>
+                </buttons>
+            </header114>
+            <title115 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title115>
+            <header120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="false" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c116
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c118>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c119
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c119>
+                </buttons>
+            </header120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <header126
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="false" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c124>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c125
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c125>
+                </buttons>
+            </header126>
+            <title127 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title127>
+            <header132
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="false" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c128
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c129>
+                    <c130
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c130>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c131
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c131>
+                </buttons>
+            </header132>
+            <title133 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title133>
+            <header138
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="false" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c134
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c134>
+                    <c135
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c136>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c137>
+                </buttons>
+            </header138>
+            <title139 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title139>
+            <header144
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c140
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c140>
+                    <c141
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c141>
+                    <c142
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c142>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c143
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c143>
+                </buttons>
+            </header144>
+            <title145 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title145>
+            <header150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c146
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c148>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c149
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c149>
+                </buttons>
+            </header150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <header156
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c154>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c155
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c155>
+                </buttons>
+            </header156>
+            <title157 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title157>
+            <header162
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c158
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c159>
+                    <c160
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c160>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c161
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c161>
+                </buttons>
+            </header162>
+            <title163 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title163>
+            <header168
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c164
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c164>
+                    <c165
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c166>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c167
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c167>
+                </buttons>
+            </header168>
+            <title169 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title169>
+            <header174
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c170
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c170>
+                    <c171
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c171>
+                    <c172
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c172>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c173
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c173>
+                </buttons>
+            </header174>
+        </container175>
+        <pager176
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title169><header174
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="light" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c170
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c170><c171
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c171><c172
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c172></links>
-<buttons jcr:primaryType="nt:unstructured"><c173
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c173></buttons>
-        </header174>
-        </container175><pager176
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager176>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample/.content.xml
index f68ee8ef8..c53b25689 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/header/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | headersample"
-            jcr:description="headersample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | headersample"
+          jcr:description="headersample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,636 +12,1104 @@
         description="headersample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container175
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><header6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c4></links>
-<buttons jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c5></buttons>
-        </header6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><header12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c8
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c10></links>
-<buttons jcr:primaryType="nt:unstructured"><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c11></buttons>
-        </header12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><header18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c16></links>
-<buttons jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c17></buttons>
-        </header18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><header24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c20
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c20><c21
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c21><c22
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c22></links>
-<buttons jcr:primaryType="nt:unstructured"><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c23></buttons>
-        </header24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><header30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c28></links>
-<buttons jcr:primaryType="nt:unstructured"><c29
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c29></buttons>
-        </header30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><header36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c34></links>
-<buttons jcr:primaryType="nt:unstructured"><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c35></buttons>
-        </header36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><header42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c39><c40
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c40></links>
-<buttons jcr:primaryType="nt:unstructured"><c41
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c41></buttons>
-        </header42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><header48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c44
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c44><c45
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c46></links>
-<buttons jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c47></buttons>
-        </header48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><header54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c51><c52
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c52></links>
-<buttons jcr:primaryType="nt:unstructured"><c53
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c53></buttons>
-        </header54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><header60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c56
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c56><c57
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c58></links>
-<buttons jcr:primaryType="nt:unstructured"><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c59></buttons>
-        </header60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><header66
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c64></links>
-<buttons jcr:primaryType="nt:unstructured"><c65
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c65></buttons>
-        </header66><title67 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title67><header72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c68
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c69><c70
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c70></links>
-<buttons jcr:primaryType="nt:unstructured"><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c71></buttons>
-        </header72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><header78
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c76></links>
-<buttons jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c77></buttons>
-        </header78><title79 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title79><header84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c80
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c80><c81
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c81><c82
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c82></links>
-<buttons jcr:primaryType="nt:unstructured"><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c83></buttons>
-        </header84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title85><header90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c88></links>
-<buttons jcr:primaryType="nt:unstructured"><c89
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c89></buttons>
-        </header90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title91><header96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c94></links>
-<buttons jcr:primaryType="nt:unstructured"><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c95></buttons>
-        </header96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><header102
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c99><c100
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c100></links>
-<buttons jcr:primaryType="nt:unstructured"><c101
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c101></buttons>
-        </header102><title103 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title103><header108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="false" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c104
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c104><c105
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c105><c106
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c106></links>
-<buttons jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c107></buttons>
-        </header108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title109><header114
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="false" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c111><c112
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c112></links>
-<buttons jcr:primaryType="nt:unstructured"><c113
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c113></buttons>
-        </header114><title115 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title115><header120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="false" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c116
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c118></links>
-<buttons jcr:primaryType="nt:unstructured"><c119
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c119></buttons>
-        </header120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><header126
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="false" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c124></links>
-<buttons jcr:primaryType="nt:unstructured"><c125
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c125></buttons>
-        </header126><title127 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title127><header132
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="false" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c128
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c129><c130
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c130></links>
-<buttons jcr:primaryType="nt:unstructured"><c131
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c131></buttons>
-        </header132><title133 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title133><header138
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="false" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c134
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c134><c135
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c136></links>
-<buttons jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c137></buttons>
-        </header138><title139 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title139><header144
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c140
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c140><c141
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c141><c142
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c142></links>
-<buttons jcr:primaryType="nt:unstructured"><c143
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c143></buttons>
-        </header144><title145 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title145><header150
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c146
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c146><c147
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c147><c148
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c148></links>
-<buttons jcr:primaryType="nt:unstructured"><c149
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c149></buttons>
-        </header150><title151 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title151><header156
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c152
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c153><c154
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c154></links>
-<buttons jcr:primaryType="nt:unstructured"><c155
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c155></buttons>
-        </header156><title157 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title157><header162
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c158
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c159><c160
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c160></links>
-<buttons jcr:primaryType="nt:unstructured"><c161
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c161></buttons>
-        </header162><title163 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title163><header168
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="false"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c164
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c164><c165
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c166></links>
-<buttons jcr:primaryType="nt:unstructured"><c167
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c167></buttons>
-        </header168><title169 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container175
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <header6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c4>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c5>
+                </buttons>
+            </header6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <header12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c8
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c10>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c11>
+                </buttons>
+            </header12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <header18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c16>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c17>
+                </buttons>
+            </header18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <header24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c20
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c20>
+                    <c21
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c21>
+                    <c22
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c22>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c23>
+                </buttons>
+            </header24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <header30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c28>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c29
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c29>
+                </buttons>
+            </header30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <header36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c34>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c35>
+                </buttons>
+            </header36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <header42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c39>
+                    <c40
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c40>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c41
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c41>
+                </buttons>
+            </header42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <header48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c44
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c44>
+                    <c45
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c46>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c47>
+                </buttons>
+            </header48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <header54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c51>
+                    <c52
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c52>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c53
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c53>
+                </buttons>
+            </header54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <header60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c56
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c56>
+                    <c57
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c58>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c59>
+                </buttons>
+            </header60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <header66
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="gradient" bgcolor="#ff8040" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" color2="#0080ff" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c64>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c65
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c65>
+                </buttons>
+            </header66>
+            <title67 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title67>
+            <header72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c68
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c69>
+                    <c70
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c70>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c71>
+                </buttons>
+            </header72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <header78
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c76>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c77>
+                </buttons>
+            </header78>
+            <title79 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title79>
+            <header84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c80
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c80>
+                    <c81
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c81>
+                    <c82
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c82>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c83>
+                </buttons>
+            </header84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title85>
+            <header90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c88>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c89
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c89>
+                </buttons>
+            </header90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title91>
+            <header96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c94>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c95>
+                </buttons>
+            </header96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <header102
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="image" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c99>
+                    <c100
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c100>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c101
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c101>
+                </buttons>
+            </header102>
+            <title103 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title103>
+            <header108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="false" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c104
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c104>
+                    <c105
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c105>
+                    <c106
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c106>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c107>
+                </buttons>
+            </header108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title109>
+            <header114
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="false" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c111>
+                    <c112
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c112>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c113
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c113>
+                </buttons>
+            </header114>
+            <title115 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title115>
+            <header120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="false" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c116
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c118>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c119
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c119>
+                </buttons>
+            </header120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <header126
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="false" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c124>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c125
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c125>
+                </buttons>
+            </header126>
+            <title127 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title127>
+            <header132
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="false" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c128
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c129>
+                    <c130
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c130>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c131
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c131>
+                </buttons>
+            </header132>
+            <title133 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title133>
+            <header138
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="false" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c134
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c134>
+                    <c135
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c136>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c137>
+                </buttons>
+            </header138>
+            <title139 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title139>
+            <header144
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c140
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c140>
+                    <c141
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c141>
+                    <c142
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c142>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c143
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c143>
+                </buttons>
+            </header144>
+            <title145 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title145>
+            <header150
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="dark" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c146
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c146>
+                    <c147
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c147>
+                    <c148
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c148>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c149
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c149>
+                </buttons>
+            </header150>
+            <title151 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title151>
+            <header156
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c152
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c153>
+                    <c154
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c154>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c155
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c155>
+                </buttons>
+            </header156>
+            <title157 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title157>
+            <header162
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="light" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c158
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c159>
+                    <c160
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c160>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c161
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c161>
+                </buttons>
+            </header162>
+            <title163 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title163>
+            <header168
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="false">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c164
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c164>
+                    <c165
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c166>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c167
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c167>
+                </buttons>
+            </header168>
+            <title169 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title169>
+            <header174
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header"
+                htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10"
+                bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+                logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+                logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark"
+                custombackground="true" bgsize="cover" fullheight="true">
+                <elevation jcr:primaryType="nt:unstructured"></elevation>
+                <links jcr:primaryType="nt:unstructured">
+                    <c170
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
+                    </c170>
+                    <c171
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
+                    </c171>
+                    <c172
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
+                    </c172>
+                </links>
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c173
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c173>
+                </buttons>
+            </header174>
+        </container175>
+        <pager176
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation Header - Light Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title169><header174
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="video" bgcolor="#eeeeee" colorscheme="" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="http://www.peregrine-cms.com" logosize="60" buttonsize="default" linkcolor="dark" custombackground="true" bgsize="cover" fullheight="true"><elevation jcr:primaryType="nt:unstructured"></elevation>
-<links jcr:primaryType="nt:unstructured"><c170
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services">
-        </c170><c171
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us">
-        </c171><c172
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us">
-        </c172></links>
-<buttons jcr:primaryType="nt:unstructured"><c173
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c173></buttons>
-        </header174>
-        </container175><pager176
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager176>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/media/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/media/.content.xml
index 8dbae36ae..065f1066a 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/media/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/media/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | media"
-            jcr:description="media themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | media"
+          jcr:description="media themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,69 +12,90 @@
         description="media themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container2
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container2
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;media&quot;&gt;Media&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;media&quot;&gt;Media&lt;/h1&gt;
 &lt;p&gt;The Media component can be used to embed images or video within your components.&lt;/p&gt;
 ">
-        </intro1>
-        
-        </container2><pager3
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            </intro1>
+
+        </container2>
+        <pager3
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager3>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/.content.xml
index 57f389693..975bd161b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | mediablock"
-            jcr:description="mediablock themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | mediablock"
+          jcr:description="mediablock themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,109 +12,141 @@
         description="mediablock themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container10
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container10
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;media-block&quot;&gt;Media Block&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;media-block&quot;&gt;Media Block&lt;/h1&gt;
 &lt;p&gt;The Media Block component is a simple Block that embeds a video or image.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media (Features)&lt;/h2&gt;">
-        </title2><mediablock3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock">
-        </mediablock3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image (Features)&lt;/h2&gt;">
-        </title4><mediablock5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color">
-        </mediablock5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video (Features)&lt;/h2&gt;">
-        </title6><mediablock7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color">
-        </mediablock7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media (Features)&lt;/h2&gt;">
+            </title2>
+            <mediablock3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock">
+            </mediablock3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Image (Features)&lt;/h2&gt;">
+            </title4>
+            <mediablock5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color">
+            </mediablock5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Video (Features)&lt;/h2&gt;">
+            </title6>
+            <mediablock7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color">
+            </mediablock7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Image/Video with no default value (Empty)&lt;/h2&gt;">
+            </title8>
+            <mediablock9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock">
+            </mediablock9>
+        </container10>
+        <pager11
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Image/Video with no default value (Empty)&lt;/h2&gt;">
-        </title8><mediablock9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock">
-        </mediablock9>
-        </container10><pager11
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager11>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-blank/.content.xml
index 10f1ddea2..606bb5eec 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | mediablocksample-blank"
-            jcr:description="mediablocksample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | mediablocksample-blank"
+          jcr:description="mediablocksample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="mediablocksample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><mediablock2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </mediablock2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><mediablock4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </mediablock4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><mediablock6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </mediablock6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><mediablock8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </mediablock8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><mediablock10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </mediablock10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><mediablock12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </mediablock12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><mediablock14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </mediablock14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><mediablock16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </mediablock16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><mediablock18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </mediablock18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><mediablock20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </mediablock20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><mediablock22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </mediablock22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><mediablock24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </mediablock24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><mediablock26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </mediablock26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><mediablock28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </mediablock28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><mediablock30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </mediablock30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><mediablock32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </mediablock32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><mediablock34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </mediablock34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><mediablock36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="false" colorscheme="dark" fullheight="false">
-        </mediablock36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><mediablock38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="false" colorscheme="dark" fullheight="true">
-        </mediablock38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><mediablock40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="false" colorscheme="light" fullheight="false">
-        </mediablock40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><mediablock42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="false" colorscheme="light" fullheight="true">
-        </mediablock42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><mediablock44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="false" colorscheme="" fullheight="false">
-        </mediablock44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><mediablock46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="false" colorscheme="" fullheight="true">
-        </mediablock46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><mediablock48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </mediablock48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><mediablock50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </mediablock50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><mediablock52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </mediablock52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><mediablock54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </mediablock54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><mediablock56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </mediablock56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <mediablock2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </mediablock2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <mediablock4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </mediablock4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <mediablock6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </mediablock6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <mediablock8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </mediablock8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <mediablock10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </mediablock10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <mediablock12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </mediablock12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <mediablock14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </mediablock14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <mediablock16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </mediablock16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <mediablock18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </mediablock18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <mediablock20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </mediablock20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <mediablock22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </mediablock22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <mediablock24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </mediablock24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <mediablock26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </mediablock26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <mediablock28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </mediablock28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <mediablock30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </mediablock30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <mediablock32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </mediablock32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <mediablock34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </mediablock34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <mediablock36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </mediablock36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <mediablock38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </mediablock38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <mediablock40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </mediablock40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <mediablock42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </mediablock42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <mediablock44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="false" colorscheme="" fullheight="false">
+            </mediablock44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <mediablock46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="false" colorscheme="" fullheight="true">
+            </mediablock46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <mediablock48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </mediablock48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <mediablock50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </mediablock50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <mediablock52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </mediablock52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <mediablock54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </mediablock54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <mediablock56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </mediablock56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <mediablock58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </mediablock58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><mediablock58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </mediablock58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-image/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-image/.content.xml
index 175a10049..dcb251c7b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-image/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample-image/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | mediablocksample-image"
-            jcr:description="mediablocksample-image themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | mediablocksample-image"
+          jcr:description="mediablocksample-image themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,536 @@
         description="mediablocksample-image themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><mediablock2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </mediablock2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><mediablock4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </mediablock4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><mediablock6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </mediablock6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><mediablock8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </mediablock8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><mediablock10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </mediablock10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><mediablock12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </mediablock12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><mediablock14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </mediablock14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><mediablock16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </mediablock16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><mediablock18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </mediablock18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><mediablock20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </mediablock20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><mediablock22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </mediablock22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><mediablock24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </mediablock24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><mediablock26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </mediablock26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><mediablock28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </mediablock28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><mediablock30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </mediablock30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><mediablock32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </mediablock32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><mediablock34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </mediablock34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><mediablock36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="dark" fullheight="false">
-        </mediablock36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><mediablock38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="dark" fullheight="true">
-        </mediablock38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><mediablock40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="light" fullheight="false">
-        </mediablock40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><mediablock42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="light" fullheight="true">
-        </mediablock42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><mediablock44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="" fullheight="false">
-        </mediablock44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><mediablock46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="" fullheight="true">
-        </mediablock46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><mediablock48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </mediablock48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><mediablock50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </mediablock50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><mediablock52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </mediablock52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><mediablock54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </mediablock54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><mediablock56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </mediablock56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <mediablock2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </mediablock2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <mediablock4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </mediablock4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <mediablock6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </mediablock6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <mediablock8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </mediablock8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Image Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <mediablock10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </mediablock10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <mediablock12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="false">
+            </mediablock12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <mediablock14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="true">
+            </mediablock14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <mediablock16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="false">
+            </mediablock16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <mediablock18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="true">
+            </mediablock18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <mediablock20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="false">
+            </mediablock20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <mediablock22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="true">
+            </mediablock22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <mediablock24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </mediablock24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <mediablock26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </mediablock26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <mediablock28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </mediablock28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <mediablock30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </mediablock30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <mediablock32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </mediablock32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <mediablock34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </mediablock34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <mediablock36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </mediablock36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <mediablock38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </mediablock38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <mediablock40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </mediablock40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <mediablock42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </mediablock42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <mediablock44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="" fullheight="false">
+            </mediablock44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <mediablock46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="" fullheight="true">
+            </mediablock46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <mediablock48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+            </mediablock48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <mediablock50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+            </mediablock50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <mediablock52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+            </mediablock52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <mediablock54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+            </mediablock54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <mediablock56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="" fullheight="false">
+            </mediablock56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <mediablock58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg"
+                mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="" fullheight="true">
+            </mediablock58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Image Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><mediablock58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/sailing-lake_large.jpg" mediatitle="Sailboat on a lake" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </mediablock58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample/.content.xml
index 640ef2423..369933485 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediablock/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | mediablocksample"
-            jcr:description="mediablocksample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | mediablocksample"
+          jcr:description="mediablocksample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,536 @@
         description="mediablocksample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><mediablock2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </mediablock2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><mediablock4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </mediablock4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><mediablock6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </mediablock6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><mediablock8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </mediablock8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><mediablock10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </mediablock10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><mediablock12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </mediablock12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><mediablock14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </mediablock14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><mediablock16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </mediablock16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><mediablock18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </mediablock18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><mediablock20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </mediablock20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><mediablock22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient" custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </mediablock22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><mediablock24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </mediablock24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><mediablock26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </mediablock26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><mediablock28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </mediablock28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><mediablock30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </mediablock30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><mediablock32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </mediablock32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><mediablock34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </mediablock34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><mediablock36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="dark" fullheight="false">
-        </mediablock36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><mediablock38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="dark" fullheight="true">
-        </mediablock38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><mediablock40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="light" fullheight="false">
-        </mediablock40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><mediablock42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="light" fullheight="true">
-        </mediablock42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><mediablock44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="" fullheight="false">
-        </mediablock44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><mediablock46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color" custombackground="false" colorscheme="" fullheight="true">
-        </mediablock46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><mediablock48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </mediablock48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><mediablock50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </mediablock50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><mediablock52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </mediablock52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><mediablock54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </mediablock54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><mediablock56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </mediablock56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <mediablock2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </mediablock2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <mediablock4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </mediablock4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <mediablock6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </mediablock6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <mediablock8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </mediablock8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Media - Video Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <mediablock10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="true" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </mediablock10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <mediablock12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="false">
+            </mediablock12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <mediablock14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="true">
+            </mediablock14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <mediablock16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="false">
+            </mediablock16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <mediablock18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="true">
+            </mediablock18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <mediablock20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="false">
+            </mediablock20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <mediablock22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="gradient"
+                custombackground="true" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="true">
+            </mediablock22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <mediablock24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </mediablock24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <mediablock26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </mediablock26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <mediablock28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </mediablock28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <mediablock30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </mediablock30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <mediablock32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </mediablock32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <mediablock34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="image"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </mediablock34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <mediablock36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </mediablock36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <mediablock38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </mediablock38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <mediablock40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </mediablock40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <mediablock42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </mediablock42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <mediablock44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="" fullheight="false">
+            </mediablock44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <mediablock46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="color"
+                custombackground="false" colorscheme="" fullheight="true">
+            </mediablock46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <mediablock48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+            </mediablock48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <mediablock50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+            </mediablock50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <mediablock52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+            </mediablock52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <mediablock54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+            </mediablock54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <mediablock56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="" fullheight="false">
+            </mediablock56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <mediablock58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock"
+                mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw"
+                mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="" fullheight="true">
+            </mediablock58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Media - Video Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><mediablock58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/mediablock" mediatype="video" videosrc="https://www.youtube-nocookie.com/embed/R5qdE0_mOcw" mediatitle="Sailing Video" toppadding="30" bottompadding="30" backgroundtype="video" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </mediablock58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediavisible/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediavisible/.content.xml
index 736e53346..f2d803f2a 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediavisible/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/mediavisible/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | mediavisible"
-            jcr:description="mediavisible themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | mediavisible"
+          jcr:description="mediavisible themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,69 +12,90 @@
         description="mediavisible themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container2
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container2
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;media-visible&quot;&gt;Media Visible&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;media-visible&quot;&gt;Media Visible&lt;/h1&gt;
 &lt;p&gt;The Media Visible component is a variation of the regular media component with dialog options that will be hidden when the embedding component does not display any media.&lt;/p&gt;
 ">
-        </intro1>
-        
-        </container2><pager3
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            </intro1>
+
+        </container2>
+        <pager3
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager3>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/.content.xml
index 3eec6bbac..c86b93bf4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | menubuttons"
-            jcr:description="menubuttons themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | menubuttons"
+          jcr:description="menubuttons themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,85 +12,115 @@
         description="menubuttons themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container7
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container7
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;menu-buttons&quot;&gt;Menu Buttons&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;menu-buttons&quot;&gt;Menu Buttons&lt;/h1&gt;
 &lt;p&gt;The Menu Buttons components contains a collection of simple Buttons for use in the Header.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Menu Buttons (.hidden)&lt;/h2&gt;">
+            </title2>
+            <menubuttons6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c4>
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c5>
+                </buttons>
+            </menubuttons6>
+        </container7>
+        <pager8
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons (.hidden)&lt;/h2&gt;">
-        </title2><menubuttons6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"><buttons jcr:primaryType="nt:unstructured"><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c5></buttons>
-        </menubuttons6>
-        </container7><pager8
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager8>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/sample/.content.xml
index 9f8237817..f87bfe7fb 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/menubuttons/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | menubuttonssample"
-            jcr:description="menubuttonssample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | menubuttonssample"
+          jcr:description="menubuttonssample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,889 @@
         description="menubuttonssample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><menubuttons5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c4></buttons>
-        </menubuttons5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><menubuttons10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c9></buttons>
-        </menubuttons10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><menubuttons15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c14></buttons>
-        </menubuttons15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><menubuttons20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c19></buttons>
-        </menubuttons20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><menubuttons25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c24></buttons>
-        </menubuttons25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><menubuttons30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c29></buttons>
-        </menubuttons30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><menubuttons35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c34></buttons>
-        </menubuttons35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><menubuttons40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c39></buttons>
-        </menubuttons40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><menubuttons45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c44></buttons>
-        </menubuttons45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><menubuttons50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c49></buttons>
-        </menubuttons50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><menubuttons55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c54></buttons>
-        </menubuttons55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><menubuttons60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c59></buttons>
-        </menubuttons60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><menubuttons65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c64></buttons>
-        </menubuttons65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><menubuttons70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c69></buttons>
-        </menubuttons70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><menubuttons75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c74></buttons>
-        </menubuttons75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><menubuttons80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c79></buttons>
-        </menubuttons80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><menubuttons85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c84></buttons>
-        </menubuttons85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><menubuttons90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="false" colorscheme="dark" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c89></buttons>
-        </menubuttons90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><menubuttons95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="false" colorscheme="dark" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c94></buttons>
-        </menubuttons95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><menubuttons100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="false" colorscheme="light" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c99></buttons>
-        </menubuttons100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><menubuttons105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="false" colorscheme="light" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c104></buttons>
-        </menubuttons105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><menubuttons110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="false" colorscheme="" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c109></buttons>
-        </menubuttons110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><menubuttons115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="false" colorscheme="" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c114></buttons>
-        </menubuttons115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><menubuttons120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c119></buttons>
-        </menubuttons120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><menubuttons125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c124></buttons>
-        </menubuttons125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><menubuttons130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c129></buttons>
-        </menubuttons130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><menubuttons135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c134></buttons>
-        </menubuttons135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><menubuttons140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><buttons jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c139></buttons>
-        </menubuttons140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <menubuttons5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c4>
+                </buttons>
+            </menubuttons5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <menubuttons10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c9>
+                </buttons>
+            </menubuttons10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <menubuttons15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c14>
+                </buttons>
+            </menubuttons15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <menubuttons20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c19>
+                </buttons>
+            </menubuttons20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <menubuttons25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c24>
+                </buttons>
+            </menubuttons25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <menubuttons30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c29>
+                </buttons>
+            </menubuttons30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <menubuttons35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c34>
+                </buttons>
+            </menubuttons35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <menubuttons40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c39>
+                </buttons>
+            </menubuttons40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <menubuttons45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c44>
+                </buttons>
+            </menubuttons45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <menubuttons50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c49>
+                </buttons>
+            </menubuttons50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <menubuttons55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c54>
+                </buttons>
+            </menubuttons55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <menubuttons60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c59>
+                </buttons>
+            </menubuttons60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <menubuttons65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c64>
+                </buttons>
+            </menubuttons65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <menubuttons70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c69>
+                </buttons>
+            </menubuttons70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <menubuttons75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c74>
+                </buttons>
+            </menubuttons75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <menubuttons80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c79>
+                </buttons>
+            </menubuttons80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <menubuttons85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c84>
+                </buttons>
+            </menubuttons85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <menubuttons90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c89>
+                </buttons>
+            </menubuttons90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <menubuttons95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c94>
+                </buttons>
+            </menubuttons95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <menubuttons100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c99>
+                </buttons>
+            </menubuttons100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <menubuttons105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c104>
+                </buttons>
+            </menubuttons105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <menubuttons110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="false" colorscheme="" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c109>
+                </buttons>
+            </menubuttons110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <menubuttons115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="false" colorscheme="" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c114>
+                </buttons>
+            </menubuttons115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <menubuttons120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c119>
+                </buttons>
+            </menubuttons120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <menubuttons125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c124>
+                </buttons>
+            </menubuttons125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <menubuttons130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c129>
+                </buttons>
+            </menubuttons130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <menubuttons135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c134>
+                </buttons>
+            </menubuttons135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <menubuttons140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c139>
+                </buttons>
+            </menubuttons140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <menubuttons145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Try It Now" buttoncolor="primary">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="Click Here!" buttoncolor="primary">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter"
+                        buttoncolor="warning">
+                    </c144>
+                </buttons>
+            </menubuttons145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Menu Buttons Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><menubuttons145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/menubuttons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><buttons jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Try It Now" buttoncolor="primary">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Click Here!" buttoncolor="primary">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="Enter" buttoncolor="warning">
-        </c144></buttons>
-        </menubuttons145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/.content.xml
index c780c313a..f64d6bd0d 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | navigation"
-            jcr:description="navigation themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | navigation"
+          jcr:description="navigation themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,99 +12,126 @@
         description="navigation themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container8
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container8
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;navigation&quot;&gt;Navigation&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;navigation&quot;&gt;Navigation&lt;/h1&gt;
 &lt;p&gt;A component for displaying a site Navigation with optional dropdowns&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation (Chrome)&lt;/h2&gt;">
-        </title2><navigation3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation">
-        </navigation3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example (Chrome)&lt;/h2&gt;">
-        </title4><navigation5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end">
-        </navigation5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation (Chrome)&lt;/h2&gt;">
+            </title2>
+            <navigation3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation">
+            </navigation3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation - Example (Chrome)&lt;/h2&gt;">
+            </title4>
+            <navigation5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end">
+            </navigation5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Navigation no default values (Empty)&lt;/h2&gt;">
+            </title6>
+            <navigation7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation">
+            </navigation7>
+        </container8>
+        <pager9
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Navigation no default values (Empty)&lt;/h2&gt;">
-        </title6><navigation7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation">
-        </navigation7>
-        </container8><pager9
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager9>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample-blank/.content.xml
index fb8daab72..77617aaec 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | navigationsample-blank"
-            jcr:description="navigationsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | navigationsample-blank"
+          jcr:description="navigationsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="navigationsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><navigation2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </navigation2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><navigation4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </navigation4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><navigation6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </navigation6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><navigation8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </navigation8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><navigation10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </navigation10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><navigation12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </navigation12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><navigation14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </navigation14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><navigation16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </navigation16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><navigation18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </navigation18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><navigation20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </navigation20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><navigation22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </navigation22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><navigation24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </navigation24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><navigation26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </navigation26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><navigation28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </navigation28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><navigation30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </navigation30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><navigation32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </navigation32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><navigation34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </navigation34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><navigation36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="false" colorscheme="dark" fullheight="false">
-        </navigation36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><navigation38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="false" colorscheme="dark" fullheight="true">
-        </navigation38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><navigation40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="false" colorscheme="light" fullheight="false">
-        </navigation40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><navigation42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="false" colorscheme="light" fullheight="true">
-        </navigation42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><navigation44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="false" colorscheme="" fullheight="false">
-        </navigation44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><navigation46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="false" colorscheme="" fullheight="true">
-        </navigation46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><navigation48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </navigation48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><navigation50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </navigation50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><navigation52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </navigation52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><navigation54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </navigation54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><navigation56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </navigation56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <navigation2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </navigation2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <navigation4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </navigation4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <navigation6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </navigation6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <navigation8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </navigation8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <navigation10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </navigation10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <navigation12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </navigation12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <navigation14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </navigation14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <navigation16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </navigation16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <navigation18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </navigation18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <navigation20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </navigation20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <navigation22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </navigation22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <navigation24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </navigation24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <navigation26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </navigation26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <navigation28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </navigation28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <navigation30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </navigation30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <navigation32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </navigation32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <navigation34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </navigation34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <navigation36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </navigation36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <navigation38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </navigation38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <navigation40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </navigation40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <navigation42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </navigation42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <navigation44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="false" colorscheme="" fullheight="false">
+            </navigation44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <navigation46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="false" colorscheme="" fullheight="true">
+            </navigation46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <navigation48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </navigation48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <navigation50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </navigation50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <navigation52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </navigation52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <navigation54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </navigation54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <navigation56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </navigation56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <navigation58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </navigation58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><navigation58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </navigation58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample/.content.xml
index 77409ec2f..ce3f887ab 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/navigation/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | navigationsample"
-            jcr:description="navigationsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | navigationsample"
+          jcr:description="navigationsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="navigationsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><navigation2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </navigation2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><navigation4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </navigation4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><navigation6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </navigation6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><navigation8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </navigation8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><navigation10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </navigation10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><navigation12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </navigation12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><navigation14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </navigation14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><navigation16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </navigation16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><navigation18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </navigation18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><navigation20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </navigation20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><navigation22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </navigation22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><navigation24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </navigation24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><navigation26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </navigation26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><navigation28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </navigation28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><navigation30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </navigation30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><navigation32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </navigation32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><navigation34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </navigation34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><navigation36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="false" colorscheme="dark" fullheight="false">
-        </navigation36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><navigation38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="false" colorscheme="dark" fullheight="true">
-        </navigation38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><navigation40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="false" colorscheme="light" fullheight="false">
-        </navigation40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><navigation42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="false" colorscheme="light" fullheight="true">
-        </navigation42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><navigation44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="false" colorscheme="" fullheight="false">
-        </navigation44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><navigation46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="false" colorscheme="" fullheight="true">
-        </navigation46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><navigation48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </navigation48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><navigation50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </navigation50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><navigation52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </navigation52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><navigation54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </navigation54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><navigation56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </navigation56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <navigation2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </navigation2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <navigation4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </navigation4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <navigation6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </navigation6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <navigation8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </navigation8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <navigation10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </navigation10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <navigation12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </navigation12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <navigation14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </navigation14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <navigation16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </navigation16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <navigation18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </navigation18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <navigation20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </navigation20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <navigation22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </navigation22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <navigation24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </navigation24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <navigation26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </navigation26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <navigation28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </navigation28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <navigation30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </navigation30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <navigation32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </navigation32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <navigation34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </navigation34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <navigation36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </navigation36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <navigation38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </navigation38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <navigation40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </navigation40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <navigation42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </navigation42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <navigation44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="false" colorscheme="" fullheight="false">
+            </navigation44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <navigation46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="false" colorscheme="" fullheight="true">
+            </navigation46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <navigation48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </navigation48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <navigation50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </navigation50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <navigation52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </navigation52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <navigation54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </navigation54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <navigation56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </navigation56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <navigation58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation"
+                bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </navigation58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Multilevel Navigation - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><navigation58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/navigation" bottompadding="0" toppadding="0" rootpage="/content/themecleanflex/pages" justifyitems="end" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </navigation58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/.content.xml
index bbb7578ff..624fa8183 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | note"
-            jcr:description="note themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | note"
+          jcr:description="note themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,159 +12,208 @@
         description="note themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container20
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container20
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;note&quot;&gt;Note&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;note&quot;&gt;Note&lt;/h1&gt;
 &lt;p&gt;The Note component is used to display small important messages to the reader&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note (Text Components)&lt;/h2&gt;">
-        </title2><note3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note">
-        </note3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution (Text Components)&lt;/h2&gt;">
-        </title4><note5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30">
-        </note5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important (Text Components)&lt;/h2&gt;">
-        </title6><note7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30">
-        </note7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note (Text Components)&lt;/h2&gt;">
-        </title8><note9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30">
-        </note9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles (.hidden)&lt;/h2&gt;">
-        </title10><note11
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30">
-        </note11><title12 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip (Text Components)&lt;/h2&gt;">
-        </title12><note13
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30">
-        </note13><title14 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark (.hidden)&lt;/h2&gt;">
-        </title14><note15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30">
-        </note15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning (Text Components)&lt;/h2&gt;">
-        </title16><note17
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30">
-        </note17><title18 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note (Text Components)&lt;/h2&gt;">
+            </title2>
+            <note3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note">
+            </note3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Caution (Text Components)&lt;/h2&gt;">
+            </title4>
+            <note5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30">
+            </note5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Important (Text Components)&lt;/h2&gt;">
+            </title6>
+            <note7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30">
+            </note7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Note (Text Components)&lt;/h2&gt;">
+            </title8>
+            <note9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30">
+            </note9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles (.hidden)&lt;/h2&gt;">
+            </title10>
+            <note11
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30">
+            </note11>
+            <title12 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip (Text Components)&lt;/h2&gt;">
+            </title12>
+            <note13
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30">
+            </note13>
+            <title14 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark (.hidden)&lt;/h2&gt;">
+            </title14>
+            <note15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30">
+            </note15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning (Text Components)&lt;/h2&gt;">
+            </title16>
+            <note17
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30">
+            </note17>
+            <title18 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example (Text Components)&lt;/h2&gt;">
+            </title18>
+            <note19
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30">
+            </note19>
+        </container20>
+        <pager21
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example (Text Components)&lt;/h2&gt;">
-        </title18><note19
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30">
-        </note19>
-        </container20><pager21
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager21>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-blank/.content.xml
index 132b18c0c..efbf61b13 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-blank"
-            jcr:description="notesample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-blank"
+          jcr:description="notesample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="notesample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="false" colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="false" colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-caution/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-caution/.content.xml
index 075cea060..c035654e5 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-caution/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-caution/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-caution"
-            jcr:description="notesample-caution themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-caution"
+          jcr:description="notesample-caution themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="notesample-caution themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Caution Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Caution Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;caution&lt;/p&gt;" notetype="caution" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-important/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-important/.content.xml
index f3eee77e5..c5ca2ea56 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-important/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-important/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-important"
-            jcr:description="notesample-important themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-important"
+          jcr:description="notesample-important themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="notesample-important themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Important Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Important Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;important&lt;/p&gt;" notetype="important" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-note/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-note/.content.xml
index d92b6a2a0..7ea73eaaa 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-note/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-note/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-note"
-            jcr:description="notesample-note themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-note"
+          jcr:description="notesample-note themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="notesample-note themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Note Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Note Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;note&lt;/p&gt;" notetype="note" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-rte/.content.xml
index 1654f5694..93f378038 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-rte"
-            jcr:description="notesample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-rte"
+          jcr:description="notesample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="notesample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-tip/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-tip/.content.xml
index 8b1b80771..67f175d47 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-tip/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-tip/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-tip"
-            jcr:description="notesample-tip themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-tip"
+          jcr:description="notesample-tip themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,507 @@
         description="notesample-tip themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Tip Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Tip Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;tip&lt;/p&gt;" notetype="tip" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning-dark/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning-dark/.content.xml
index b34be0c70..716b333e1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning-dark/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning-dark/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-warning-dark"
-            jcr:description="notesample-warning-dark themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-warning-dark"
+          jcr:description="notesample-warning-dark themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,510 @@
         description="notesample-warning-dark themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="false" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="false" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="false" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="false" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="false" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="false" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="false" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="false" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="false" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="false" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="false" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="false" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="dark" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="light" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Dark Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" colorscheme="" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning/.content.xml
index e866b9e96..dc729778b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample-warning/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample-warning"
-            jcr:description="notesample-warning themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample-warning"
+          jcr:description="notesample-warning themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="notesample-warning themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Warning Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="false" colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Warning Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;warning&lt;/p&gt;" notetype="warning" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample/.content.xml
index 83a3eb2fa..969302878 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/note/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | notesample"
-            jcr:description="notesample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | notesample"
+          jcr:description="notesample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="notesample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><note2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </note2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><note4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </note4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><note6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </note6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><note8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </note8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><note10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </note10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><note12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </note12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><note14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </note14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><note16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </note16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><note18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </note18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><note20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </note20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><note22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </note22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><note24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </note24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><note26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </note26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><note28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </note28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><note30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </note30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><note32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </note32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><note34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </note34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><note36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </note36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><note38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </note38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><note40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </note40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><note42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </note42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><note44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </note44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><note46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </note46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><note48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </note48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><note50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </note50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><note52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </note52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><note54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </note54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><note56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </note56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <note2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="dark" fullheight="true">
+            </note2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <note4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="false">
+            </note4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <note6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="true">
+            </note6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <note8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="false">
+            </note8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Note - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <note10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="true">
+            </note10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <note12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="false">
+            </note12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <note14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="true">
+            </note14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <note16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="false">
+            </note16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <note18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="true">
+            </note18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <note20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="false">
+            </note20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <note22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="true">
+            </note22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <note24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </note24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <note26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </note26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <note28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </note28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <note30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </note30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <note32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </note32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <note34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </note34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <note36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
+            </note36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <note38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
+            </note38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <note40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
+            </note40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <note42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
+            </note42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <note44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
+            </note44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <note46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
+            </note46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <note48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </note48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <note50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </note50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <note52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </note52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <note54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </note54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <note56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </note56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <note58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note"
+                text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30"
+                bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </note58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Note - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><note58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/note" text="&lt;p&gt;Here is some example note text default style&lt;/p&gt;" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </note58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/.content.xml
index 2e177972a..fbcf78209 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pagelist"
-            jcr:description="pagelist themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pagelist"
+          jcr:description="pagelist themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,99 +12,126 @@
         description="pagelist themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container8
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container8
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;pagelist&quot;&gt;Pagelist&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;pagelist&quot;&gt;Pagelist&lt;/h1&gt;
 &lt;p&gt;The Page List component displays the hierarchy of the current site to a given depth.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List (Features)&lt;/h2&gt;">
-        </title2><pagelist3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist">
-        </pagelist3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example (Features)&lt;/h2&gt;">
-        </title4><pagelist5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2">
-        </pagelist5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List (Features)&lt;/h2&gt;">
+            </title2>
+            <pagelist3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist">
+            </pagelist3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List - Example (Features)&lt;/h2&gt;">
+            </title4>
+            <pagelist5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2">
+            </pagelist5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List no default values (Empty)&lt;/h2&gt;">
+            </title6>
+            <pagelist7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist">
+            </pagelist7>
+        </container8>
+        <pager9
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List no default values (Empty)&lt;/h2&gt;">
-        </title6><pagelist7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist">
-        </pagelist7>
-        </container8><pager9
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager9>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample-blank/.content.xml
index 28c9ec47d..fbda269d0 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pagelistsample-blank"
-            jcr:description="pagelistsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pagelistsample-blank"
+          jcr:description="pagelistsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="pagelistsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><pagelist2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </pagelist2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><pagelist4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </pagelist4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><pagelist6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </pagelist6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><pagelist8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </pagelist8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><pagelist10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </pagelist10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><pagelist12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </pagelist12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><pagelist14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </pagelist14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><pagelist16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </pagelist16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><pagelist18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </pagelist18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><pagelist20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </pagelist20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><pagelist22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </pagelist22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><pagelist24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </pagelist24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><pagelist26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </pagelist26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><pagelist28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </pagelist28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><pagelist30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </pagelist30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><pagelist32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </pagelist32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><pagelist34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </pagelist34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><pagelist36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="false" colorscheme="dark" fullheight="false">
-        </pagelist36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><pagelist38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="false" colorscheme="dark" fullheight="true">
-        </pagelist38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><pagelist40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="false" colorscheme="light" fullheight="false">
-        </pagelist40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><pagelist42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="false" colorscheme="light" fullheight="true">
-        </pagelist42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><pagelist44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="false" colorscheme="" fullheight="false">
-        </pagelist44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><pagelist46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="false" colorscheme="" fullheight="true">
-        </pagelist46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><pagelist48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </pagelist48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><pagelist50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </pagelist50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><pagelist52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </pagelist52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><pagelist54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </pagelist54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><pagelist56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </pagelist56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <pagelist2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </pagelist2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <pagelist4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </pagelist4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <pagelist6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </pagelist6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <pagelist8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </pagelist8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <pagelist10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </pagelist10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <pagelist12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </pagelist12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <pagelist14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </pagelist14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <pagelist16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </pagelist16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <pagelist18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </pagelist18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <pagelist20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </pagelist20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <pagelist22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </pagelist22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <pagelist24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </pagelist24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <pagelist26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </pagelist26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <pagelist28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </pagelist28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <pagelist30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </pagelist30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <pagelist32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </pagelist32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <pagelist34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </pagelist34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <pagelist36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </pagelist36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <pagelist38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </pagelist38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <pagelist40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </pagelist40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <pagelist42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </pagelist42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <pagelist44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="false" colorscheme="" fullheight="false">
+            </pagelist44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <pagelist46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="false" colorscheme="" fullheight="true">
+            </pagelist46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <pagelist48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </pagelist48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <pagelist50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </pagelist50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <pagelist52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </pagelist52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <pagelist54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </pagelist54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <pagelist56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </pagelist56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <pagelist58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </pagelist58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><pagelist58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </pagelist58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample/.content.xml
index c26ef3f59..a947e7aa7 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelist/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pagelistsample"
-            jcr:description="pagelistsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pagelistsample"
+          jcr:description="pagelistsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="pagelistsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><pagelist2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </pagelist2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><pagelist4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </pagelist4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><pagelist6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </pagelist6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><pagelist8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </pagelist8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><pagelist10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </pagelist10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><pagelist12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </pagelist12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><pagelist14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </pagelist14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><pagelist16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </pagelist16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><pagelist18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </pagelist18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><pagelist20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </pagelist20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><pagelist22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </pagelist22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><pagelist24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </pagelist24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><pagelist26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </pagelist26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><pagelist28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </pagelist28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><pagelist30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </pagelist30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><pagelist32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </pagelist32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><pagelist34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </pagelist34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><pagelist36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="false" colorscheme="dark" fullheight="false">
-        </pagelist36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><pagelist38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="false" colorscheme="dark" fullheight="true">
-        </pagelist38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><pagelist40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="false" colorscheme="light" fullheight="false">
-        </pagelist40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><pagelist42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="false" colorscheme="light" fullheight="true">
-        </pagelist42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><pagelist44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="false" colorscheme="" fullheight="false">
-        </pagelist44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><pagelist46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="false" colorscheme="" fullheight="true">
-        </pagelist46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><pagelist48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </pagelist48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><pagelist50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </pagelist50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><pagelist52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </pagelist52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><pagelist54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </pagelist54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><pagelist56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </pagelist56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <pagelist2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </pagelist2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <pagelist4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </pagelist4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <pagelist6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </pagelist6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <pagelist8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </pagelist8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Page List - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <pagelist10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </pagelist10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <pagelist12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </pagelist12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <pagelist14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </pagelist14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <pagelist16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </pagelist16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <pagelist18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </pagelist18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <pagelist20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </pagelist20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <pagelist22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </pagelist22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <pagelist24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </pagelist24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <pagelist26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </pagelist26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <pagelist28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </pagelist28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <pagelist30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </pagelist30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <pagelist32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </pagelist32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <pagelist34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </pagelist34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <pagelist36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </pagelist36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <pagelist38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </pagelist38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <pagelist40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </pagelist40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <pagelist42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </pagelist42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <pagelist44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="false" colorscheme="" fullheight="false">
+            </pagelist44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <pagelist46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="false" colorscheme="" fullheight="true">
+            </pagelist46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <pagelist48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </pagelist48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <pagelist50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </pagelist50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <pagelist52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </pagelist52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <pagelist54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </pagelist54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <pagelist56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </pagelist56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <pagelist58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist"
+                bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </pagelist58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Page List - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><pagelist58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelist" bottompadding="20" toppadding="20" rootpage="/content/themecleanflex/pages" levels="2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </pagelist58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/.content.xml
index 591bdda22..aad4f4871 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pagelistnested"
-            jcr:description="pagelistnested themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pagelistnested"
+          jcr:description="pagelistnested themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,79 +12,101 @@
         description="pagelistnested themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container4
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container4
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;page-list-nested&quot;&gt;Page List Nested&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;page-list-nested&quot;&gt;Page List Nested&lt;/h1&gt;
 &lt;p&gt;Used by the PageList component&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pagelistnested (.hidden)&lt;/h2&gt;">
+            </title2>
+            <pagelistnested3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested">
+            </pagelistnested3>
+        </container4>
+        <pager5
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested (.hidden)&lt;/h2&gt;">
-        </title2><pagelistnested3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested">
-        </pagelistnested3>
-        </container4><pager5
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager5>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/sample/.content.xml
index d5818e31a..8a5b4fdd1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pagelistnested/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pagelistnestedsample"
-            jcr:description="pagelistnestedsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pagelistnestedsample"
+          jcr:description="pagelistnestedsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="pagelistnestedsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><pagelistnested2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </pagelistnested2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><pagelistnested4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </pagelistnested4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><pagelistnested6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </pagelistnested6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><pagelistnested8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </pagelistnested8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><pagelistnested10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </pagelistnested10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><pagelistnested12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </pagelistnested12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><pagelistnested14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </pagelistnested14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><pagelistnested16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </pagelistnested16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><pagelistnested18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </pagelistnested18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><pagelistnested20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </pagelistnested20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><pagelistnested22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </pagelistnested22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><pagelistnested24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </pagelistnested24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><pagelistnested26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </pagelistnested26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><pagelistnested28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </pagelistnested28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><pagelistnested30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </pagelistnested30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><pagelistnested32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </pagelistnested32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><pagelistnested34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </pagelistnested34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><pagelistnested36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="false" colorscheme="dark" fullheight="false">
-        </pagelistnested36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><pagelistnested38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="false" colorscheme="dark" fullheight="true">
-        </pagelistnested38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><pagelistnested40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="false" colorscheme="light" fullheight="false">
-        </pagelistnested40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><pagelistnested42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="false" colorscheme="light" fullheight="true">
-        </pagelistnested42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><pagelistnested44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="false" colorscheme="" fullheight="false">
-        </pagelistnested44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><pagelistnested46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="false" colorscheme="" fullheight="true">
-        </pagelistnested46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><pagelistnested48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </pagelistnested48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><pagelistnested50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </pagelistnested50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><pagelistnested52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </pagelistnested52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><pagelistnested54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </pagelistnested54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><pagelistnested56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </pagelistnested56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <pagelistnested2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </pagelistnested2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <pagelistnested4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </pagelistnested4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <pagelistnested6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </pagelistnested6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <pagelistnested8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </pagelistnested8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pagelistnested Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <pagelistnested10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </pagelistnested10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <pagelistnested12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </pagelistnested12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <pagelistnested14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </pagelistnested14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <pagelistnested16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </pagelistnested16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <pagelistnested18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </pagelistnested18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <pagelistnested20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </pagelistnested20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <pagelistnested22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </pagelistnested22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <pagelistnested24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </pagelistnested24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <pagelistnested26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </pagelistnested26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <pagelistnested28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </pagelistnested28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <pagelistnested30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </pagelistnested30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <pagelistnested32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </pagelistnested32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <pagelistnested34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </pagelistnested34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <pagelistnested36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </pagelistnested36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <pagelistnested38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </pagelistnested38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <pagelistnested40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </pagelistnested40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <pagelistnested42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </pagelistnested42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <pagelistnested44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="false" colorscheme="" fullheight="false">
+            </pagelistnested44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <pagelistnested46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="false" colorscheme="" fullheight="true">
+            </pagelistnested46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <pagelistnested48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </pagelistnested48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <pagelistnested50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </pagelistnested50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <pagelistnested52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </pagelistnested52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <pagelistnested54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </pagelistnested54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <pagelistnested56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </pagelistnested56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <pagelistnested58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </pagelistnested58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pagelistnested Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><pagelistnested58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pagelistnested" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </pagelistnested58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/.content.xml
index 7d49c63d6..4993b9ff8 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pager"
-            jcr:description="pager themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pager"
+          jcr:description="pager themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,99 +12,126 @@
         description="pager themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container8
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container8
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;pager&quot;&gt;Pager&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;pager&quot;&gt;Pager&lt;/h1&gt;
 &lt;p&gt;The Pager Component provides convenient access to the next and previous pages in the content repository.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager (Features)&lt;/h2&gt;">
-        </title2><pager3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example (Features)&lt;/h2&gt;">
-        </title4><pager5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10">
-        </pager5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager (Features)&lt;/h2&gt;">
+            </title2>
+            <pager3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            </pager3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager - Example (Features)&lt;/h2&gt;">
+            </title4>
+            <pager5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10">
+            </pager5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Article Pager (Empty)&lt;/h2&gt;">
+            </title6>
+            <pager7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            </pager7>
+        </container8>
+        <pager9
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Article Pager (Empty)&lt;/h2&gt;">
-        </title6><pager7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager7>
-        </container8><pager9
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager9>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample-blank/.content.xml
index 303b8edbd..ec1b0aaa9 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pagersample-blank"
-            jcr:description="pagersample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pagersample-blank"
+          jcr:description="pagersample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="pagersample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><pager2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </pager2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><pager4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </pager4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><pager6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </pager6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><pager8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </pager8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><pager10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </pager10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><pager12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </pager12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><pager14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </pager14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><pager16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </pager16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><pager18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </pager18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><pager20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </pager20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><pager22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </pager22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><pager24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </pager24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><pager26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </pager26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><pager28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </pager28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><pager30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </pager30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><pager32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </pager32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><pager34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </pager34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><pager36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="false" colorscheme="dark" fullheight="false">
-        </pager36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><pager38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="false" colorscheme="dark" fullheight="true">
-        </pager38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><pager40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="false" colorscheme="light" fullheight="false">
-        </pager40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><pager42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="false" colorscheme="light" fullheight="true">
-        </pager42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><pager44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="false" colorscheme="" fullheight="false">
-        </pager44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><pager46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="false" colorscheme="" fullheight="true">
-        </pager46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><pager48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </pager48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><pager50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </pager50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><pager52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </pager52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><pager54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </pager54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><pager56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </pager56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <pager2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </pager2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <pager4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </pager4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <pager6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </pager6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <pager8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </pager8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <pager10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </pager10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <pager12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </pager12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <pager14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </pager14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <pager16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </pager16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <pager18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </pager18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <pager20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </pager20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <pager22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </pager22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <pager24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </pager24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <pager26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </pager26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <pager28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </pager28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <pager30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </pager30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <pager32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </pager32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <pager34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </pager34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <pager36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </pager36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <pager38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </pager38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <pager40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </pager40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <pager42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </pager42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <pager44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="false" colorscheme="" fullheight="false">
+            </pager44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <pager46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="false" colorscheme="" fullheight="true">
+            </pager46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <pager48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </pager48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <pager50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </pager50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <pager52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </pager52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <pager54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </pager54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <pager56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </pager56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <pager58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </pager58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><pager58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </pager58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample/.content.xml
index d7360ab69..c2dc1c75c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/pager/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | pagersample"
-            jcr:description="pagersample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | pagersample"
+          jcr:description="pagersample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,507 @@
         description="pagersample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><pager2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
-        </pager2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><pager4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
-        </pager4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><pager6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
-        </pager6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><pager8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
-        </pager8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><pager10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
-        </pager10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><pager12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
-        </pager12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><pager14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
-        </pager14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><pager16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
-        </pager16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><pager18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
-        </pager18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><pager20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="false">
-        </pager20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><pager22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" fullheight="true">
-        </pager22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><pager24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false">
-        </pager24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><pager26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true">
-        </pager26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><pager28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false">
-        </pager28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><pager30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true">
-        </pager30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><pager32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="false">
-        </pager32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><pager34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" fullheight="true">
-        </pager34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><pager36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="false" fullheight="false">
-        </pager36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><pager38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="false" fullheight="true">
-        </pager38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><pager40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="false" fullheight="false">
-        </pager40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><pager42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="false" fullheight="true">
-        </pager42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><pager44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="false" fullheight="false">
-        </pager44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><pager46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="false" fullheight="true">
-        </pager46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><pager48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
-        </pager48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><pager50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
-        </pager50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><pager52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
-        </pager52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><pager54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
-        </pager54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><pager56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
-        </pager56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <pager2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+            </pager2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <pager4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
+            </pager4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <pager6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+            </pager6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <pager8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="false">
+            </pager8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Pager - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <pager10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" fullheight="true">
+            </pager10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <pager12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false">
+            </pager12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <pager14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true">
+            </pager14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <pager16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false">
+            </pager16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <pager18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true">
+            </pager18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <pager20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="false">
+            </pager20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <pager22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                fullheight="true">
+            </pager22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <pager24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+            </pager24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <pager26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+            </pager26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <pager28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+            </pager28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <pager30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+            </pager30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <pager32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="false">
+            </pager32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <pager34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                fullheight="true">
+            </pager34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <pager36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="false" fullheight="false">
+            </pager36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <pager38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="false" fullheight="true">
+            </pager38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <pager40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="false" fullheight="false">
+            </pager40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <pager42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="false" fullheight="true">
+            </pager42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <pager44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="false" fullheight="false">
+            </pager44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <pager46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="false" fullheight="true">
+            </pager46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <pager48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+            </pager48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <pager50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="dark" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+            </pager50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <pager52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+            </pager52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <pager54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="light" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+            </pager54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <pager56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="false">
+            </pager56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <pager58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager"
+                prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
+            </pager58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Pager - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><pager58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager" prevlabel="&lt; Prev" nextlabel="Next &gt;" colorscheme="" toppadding="10" bottompadding="10" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" fullheight="true">
-        </pager58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/.content.xml
index 3288b8e29..fca312a91 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | quote"
-            jcr:description="quote themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | quote"
+          jcr:description="quote themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,119 +12,157 @@
         description="quote themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container12
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container12
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;quote&quot;&gt;Quote&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;quote&quot;&gt;Quote&lt;/h1&gt;
 &lt;p&gt;The Quote component displays a text block with styling to indicate that is is a quote.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote (Text Components)&lt;/h2&gt;">
-        </title2><quote3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote">
-        </quote3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block (Text Components)&lt;/h2&gt;">
-        </title4><quote5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30">
-        </quote5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large (Text Components)&lt;/h2&gt;">
-        </title6><quote7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30">
-        </quote7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles (.hidden)&lt;/h2&gt;">
-        </title8><quote9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30">
-        </quote9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote (Text Components)&lt;/h2&gt;">
+            </title2>
+            <quote3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote">
+            </quote3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Block (Text Components)&lt;/h2&gt;">
+            </title4>
+            <quote5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30">
+            </quote5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote  - Block Large (Text Components)&lt;/h2&gt;">
+            </title6>
+            <quote7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30">
+            </quote7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote With All RTE Styles (.hidden)&lt;/h2&gt;">
+            </title8>
+            <quote9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30">
+            </quote9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic (Text Components)&lt;/h2&gt;">
+            </title10>
+            <quote11
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30">
+            </quote11>
+        </container12>
+        <pager13
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic (Text Components)&lt;/h2&gt;">
-        </title10><quote11
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30">
-        </quote11>
-        </container12><pager13
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager13>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blank/.content.xml
index ce68e7920..1f582501c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | quotesample-blank"
-            jcr:description="quotesample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | quotesample-blank"
+          jcr:description="quotesample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="quotesample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><quote2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </quote2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><quote4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </quote4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><quote6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </quote6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><quote8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </quote8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><quote10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </quote10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><quote12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </quote12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><quote14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </quote14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><quote16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </quote16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><quote18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </quote18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><quote20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </quote20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><quote22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </quote22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><quote24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </quote24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><quote26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </quote26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><quote28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </quote28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><quote30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </quote30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><quote32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </quote32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><quote34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </quote34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><quote36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="false" colorscheme="dark" fullheight="false">
-        </quote36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><quote38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="false" colorscheme="dark" fullheight="true">
-        </quote38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><quote40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="false" colorscheme="light" fullheight="false">
-        </quote40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><quote42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="false" colorscheme="light" fullheight="true">
-        </quote42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><quote44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="false" colorscheme="" fullheight="false">
-        </quote44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><quote46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="false" colorscheme="" fullheight="true">
-        </quote46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><quote48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </quote48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><quote50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </quote50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><quote52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </quote52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><quote54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </quote54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><quote56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </quote56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <quote2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </quote2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <quote4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </quote4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <quote6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </quote6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <quote8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </quote8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <quote10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </quote10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <quote12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </quote12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <quote14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </quote14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <quote16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </quote16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <quote18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </quote18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <quote20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </quote20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <quote22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </quote22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <quote24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </quote24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <quote26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </quote26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <quote28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </quote28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <quote30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </quote30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <quote32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </quote32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <quote34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </quote34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <quote36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </quote36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <quote38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </quote38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <quote40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </quote40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <quote42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </quote42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <quote44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="false" colorscheme="" fullheight="false">
+            </quote44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <quote46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="false" colorscheme="" fullheight="true">
+            </quote46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <quote48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </quote48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <quote50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </quote50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <quote52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </quote52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <quote54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </quote54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <quote56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </quote56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <quote58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </quote58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><quote58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </quote58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blockquote/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blockquote/.content.xml
index 767f12289..603d063b6 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blockquote/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-blockquote/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | quotesample-blockquote"
-            jcr:description="quotesample-blockquote themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | quotesample-blockquote"
+          jcr:description="quotesample-blockquote themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,536 @@
         description="quotesample-blockquote themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><quote2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </quote2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><quote4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </quote4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><quote6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </quote6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><quote8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </quote8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><quote10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </quote10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><quote12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </quote12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><quote14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </quote14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><quote16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </quote16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><quote18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </quote18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><quote20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </quote20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><quote22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </quote22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><quote24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </quote24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><quote26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </quote26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><quote28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </quote28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><quote30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </quote30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><quote32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </quote32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><quote34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </quote34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><quote36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </quote36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><quote38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </quote38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><quote40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </quote40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><quote42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </quote42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><quote44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </quote44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><quote46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </quote46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><quote48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </quote48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><quote50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </quote50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><quote52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </quote52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><quote54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </quote54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><quote56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </quote56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <quote2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </quote2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <quote4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </quote4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <quote6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </quote6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <quote8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </quote8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Block Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <quote10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </quote10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <quote12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="false">
+            </quote12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <quote14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="true">
+            </quote14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <quote16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="false">
+            </quote16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <quote18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="true">
+            </quote18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <quote20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="false">
+            </quote20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <quote22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="true">
+            </quote22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <quote24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </quote24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <quote26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </quote26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <quote28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </quote28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <quote30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </quote30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <quote32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </quote32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <quote34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </quote34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <quote36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="false">
+            </quote36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <quote38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="true">
+            </quote38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <quote40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="false">
+            </quote40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <quote42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="true">
+            </quote42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <quote44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="false">
+            </quote44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <quote46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="true">
+            </quote46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <quote48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+            </quote48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <quote50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+            </quote50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <quote52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+            </quote52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <quote54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+            </quote54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <quote56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+            </quote56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <quote58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+            </quote58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Block Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><quote58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;If you think you can do a thing or think you cant do a thing, youre right. &lt;/p&gt;&lt;/i&gt;- Henry Ford&lt;/i&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </quote58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-largequote/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-largequote/.content.xml
index 08706dc83..c790e3a57 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-largequote/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-largequote/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | quotesample-largequote"
-            jcr:description="quotesample-largequote themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | quotesample-largequote"
+          jcr:description="quotesample-largequote themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,536 @@
         description="quotesample-largequote themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><quote2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </quote2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><quote4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </quote4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><quote6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </quote6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><quote8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </quote8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><quote10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </quote10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><quote12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </quote12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><quote14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </quote14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><quote16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </quote16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><quote18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </quote18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><quote20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </quote20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><quote22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </quote22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><quote24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </quote24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><quote26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </quote26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><quote28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </quote28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><quote30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </quote30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><quote32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </quote32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><quote34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </quote34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><quote36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </quote36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><quote38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </quote38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><quote40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </quote40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><quote42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </quote42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><quote44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </quote44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><quote46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </quote46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><quote48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </quote48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><quote50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </quote50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><quote52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </quote52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><quote54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </quote54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><quote56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </quote56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <quote2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </quote2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <quote4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </quote4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <quote6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </quote6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <quote8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </quote8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <quote10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </quote10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <quote12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="false">
+            </quote12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <quote14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="true">
+            </quote14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <quote16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="false">
+            </quote16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <quote18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="true">
+            </quote18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <quote20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="false">
+            </quote20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <quote22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="true">
+            </quote22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <quote24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </quote24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <quote26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </quote26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <quote28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </quote28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <quote30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </quote30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <quote32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </quote32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <quote34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </quote34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <quote36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="false">
+            </quote36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <quote38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="true">
+            </quote38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <quote40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="false">
+            </quote40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <quote42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="true">
+            </quote42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <quote44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="false">
+            </quote44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <quote46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="true">
+            </quote46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <quote48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+            </quote48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <quote50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+            </quote50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <quote52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+            </quote52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <quote54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+            </quote54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <quote56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+            </quote56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <quote58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;"
+                blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+            </quote58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote  - Block Large Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><quote58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h2&gt;&lt;em&gt;That's one small step for a man, one giant leap for mankind.&lt;br&gt;&lt;/em&gt;&lt;em&gt;-Neil Armstrong&lt;/em&gt;&lt;/h2&gt;" blockquote="true" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </quote58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-rte/.content.xml
index 69f58575e..250ddc1c4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | quotesample-rte"
-            jcr:description="quotesample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | quotesample-rte"
+          jcr:description="quotesample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,536 @@
         description="quotesample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><quote2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </quote2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><quote4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </quote4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><quote6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </quote6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><quote8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </quote8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><quote10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </quote10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><quote12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </quote12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><quote14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </quote14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><quote16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </quote16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><quote18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </quote18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><quote20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </quote20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><quote22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </quote22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><quote24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </quote24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><quote26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </quote26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><quote28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </quote28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><quote30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </quote30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><quote32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </quote32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><quote34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </quote34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><quote36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </quote36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><quote38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </quote38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><quote40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </quote40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><quote42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </quote42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><quote44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </quote44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><quote46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </quote46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><quote48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </quote48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><quote50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </quote50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><quote52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </quote52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><quote54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </quote54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><quote56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </quote56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <quote2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </quote2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <quote4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </quote4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <quote6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </quote6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <quote8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </quote8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <quote10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </quote10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <quote12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="false">
+            </quote12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <quote14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="true">
+            </quote14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <quote16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="false">
+            </quote16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <quote18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="true">
+            </quote18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <quote20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="false">
+            </quote20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <quote22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="true">
+            </quote22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <quote24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </quote24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <quote26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </quote26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <quote28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </quote28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <quote30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </quote30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <quote32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </quote32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <quote34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </quote34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <quote36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="false">
+            </quote36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <quote38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="true">
+            </quote38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <quote40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="false">
+            </quote40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <quote42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="true">
+            </quote42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <quote44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="false">
+            </quote44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <quote46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="true">
+            </quote46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <quote48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+            </quote48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <quote50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+            </quote50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <quote52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+            </quote52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <quote54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+            </quote54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <quote56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+            </quote56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <quote58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+            </quote58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><quote58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </quote58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample/.content.xml
index ce1e5dd55..51707fe2c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/quote/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | quotesample"
-            jcr:description="quotesample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | quotesample"
+          jcr:description="quotesample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,536 @@
         description="quotesample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><quote2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </quote2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><quote4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </quote4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><quote6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </quote6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><quote8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </quote8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><quote10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </quote10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><quote12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </quote12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><quote14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </quote14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><quote16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </quote16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><quote18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </quote18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><quote20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </quote20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><quote22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </quote22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><quote24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </quote24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><quote26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </quote26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><quote28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </quote28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><quote30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </quote30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><quote32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </quote32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><quote34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </quote34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><quote36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </quote36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><quote38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </quote38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><quote40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </quote40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><quote42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </quote42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><quote44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </quote44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><quote46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </quote46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><quote48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </quote48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><quote50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </quote50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><quote52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </quote52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><quote54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </quote54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><quote56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </quote56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <quote2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </quote2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <quote4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </quote4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <quote6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </quote6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <quote8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </quote8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Quote - Basic Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <quote10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </quote10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <quote12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="false">
+            </quote12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <quote14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"
+                fullheight="true">
+            </quote14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <quote16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="false">
+            </quote16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <quote18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"
+                fullheight="true">
+            </quote18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <quote20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="false">
+            </quote20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <quote22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme=""
+                fullheight="true">
+            </quote22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <quote24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </quote24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <quote26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </quote26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <quote28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </quote28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <quote30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </quote30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <quote32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </quote32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <quote34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </quote34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <quote36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="false">
+            </quote36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <quote38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="dark" fullheight="true">
+            </quote38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <quote40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="false">
+            </quote40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <quote42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="light" fullheight="true">
+            </quote42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <quote44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="false">
+            </quote44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <quote46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="false"
+                colorscheme="" fullheight="true">
+            </quote46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <quote48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="false">
+            </quote48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <quote50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark" fullheight="true">
+            </quote50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <quote52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="false">
+            </quote52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <quote54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light" fullheight="true">
+            </quote54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <quote56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+            </quote56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <quote58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote"
+                text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;"
+                blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true"
+                bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+            </quote58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Quote - Basic Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><quote58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/quote" text="&lt;p&gt;&quot;Thats one small step for a man, one giant leap for mankind.&quot;&lt;/p&gt;&lt;p&gt;-&lt;i&gt;Neil Armstrong&lt;/i&gt;&lt;/p&gt;" blockquote="false" blockwidth="article" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </quote58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/.content.xml
index e482550a6..dc9beefc6 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | richtext"
-            jcr:description="richtext themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | richtext"
+          jcr:description="richtext themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,119 +12,155 @@
         description="richtext themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container12
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container12
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;rich-text&quot;&gt;Rich Text&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;rich-text&quot;&gt;Rich Text&lt;/h1&gt;
 &lt;p&gt;The Rich Text component displays text and is edited using a powerful rich text editor allowing you full control over the content of the component.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles (.hidden)&lt;/h2&gt;">
-        </title2><richtext3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
-        </richtext3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text (Text Components)&lt;/h2&gt;">
-        </title4><richtext5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext">
-        </richtext5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media (Text Components)&lt;/h2&gt;">
-        </title6><richtext7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;">
-        </richtext7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example (Text Components)&lt;/h2&gt;">
-        </title8><richtext9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;">
-        </richtext9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Block - all styles (.hidden)&lt;/h2&gt;">
+            </title2>
+            <richtext3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;">
+            </richtext3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text (Text Components)&lt;/h2&gt;">
+            </title4>
+            <richtext5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext">
+            </richtext5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - with media (Text Components)&lt;/h2&gt;">
+            </title6>
+            <richtext7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;">
+            </richtext7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - Example (Text Components)&lt;/h2&gt;">
+            </title8>
+            <richtext9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;">
+            </richtext9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Empty Rich Text Test (Empty)&lt;/h2&gt;">
+            </title10>
+            <richtext11
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext">
+            </richtext11>
+        </container12>
+        <pager13
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Empty Rich Text Test (Empty)&lt;/h2&gt;">
-        </title10><richtext11
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext">
-        </richtext11>
-        </container12><pager13
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager13>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-allstyles/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-allstyles/.content.xml
index 56148ecdf..09ccd54c3 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-allstyles/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-allstyles/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | richtextsample-allstyles"
-            jcr:description="richtextsample-allstyles themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | richtextsample-allstyles"
+          jcr:description="richtextsample-allstyles themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="richtextsample-allstyles themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><richtext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </richtext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><richtext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </richtext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><richtext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </richtext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><richtext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </richtext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><richtext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </richtext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><richtext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </richtext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><richtext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </richtext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><richtext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </richtext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><richtext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </richtext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><richtext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </richtext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><richtext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </richtext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><richtext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </richtext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><richtext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </richtext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><richtext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </richtext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><richtext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </richtext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><richtext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </richtext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><richtext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </richtext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><richtext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="false" colorscheme="dark" fullheight="false">
-        </richtext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><richtext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="false" colorscheme="dark" fullheight="true">
-        </richtext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><richtext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="false" colorscheme="light" fullheight="false">
-        </richtext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><richtext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="false" colorscheme="light" fullheight="true">
-        </richtext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><richtext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="false" colorscheme="" fullheight="false">
-        </richtext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><richtext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="false" colorscheme="" fullheight="true">
-        </richtext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><richtext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </richtext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><richtext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </richtext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><richtext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </richtext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><richtext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </richtext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><richtext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </richtext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <richtext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </richtext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <richtext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </richtext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <richtext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </richtext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <richtext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </richtext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Block - all styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <richtext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </richtext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <richtext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </richtext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <richtext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </richtext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <richtext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </richtext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <richtext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </richtext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <richtext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </richtext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <richtext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </richtext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <richtext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </richtext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <richtext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </richtext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <richtext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </richtext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <richtext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </richtext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <richtext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </richtext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <richtext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </richtext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <richtext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </richtext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <richtext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </richtext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <richtext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </richtext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <richtext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </richtext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <richtext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="false" colorscheme="" fullheight="false">
+            </richtext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <richtext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="false" colorscheme="" fullheight="true">
+            </richtext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <richtext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </richtext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <richtext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </richtext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <richtext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </richtext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <richtext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </richtext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <richtext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </richtext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <richtext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </richtext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Block - all styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><richtext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </richtext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-blank/.content.xml
index 47bb71540..ff98bbb23 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | richtextsample-blank"
-            jcr:description="richtextsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | richtextsample-blank"
+          jcr:description="richtextsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="richtextsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><richtext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </richtext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><richtext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </richtext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><richtext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </richtext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><richtext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </richtext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><richtext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </richtext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><richtext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </richtext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><richtext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </richtext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><richtext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </richtext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><richtext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </richtext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><richtext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </richtext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><richtext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </richtext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><richtext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </richtext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><richtext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </richtext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><richtext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </richtext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><richtext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </richtext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><richtext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </richtext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><richtext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </richtext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><richtext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="false" colorscheme="dark" fullheight="false">
-        </richtext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><richtext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="false" colorscheme="dark" fullheight="true">
-        </richtext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><richtext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="false" colorscheme="light" fullheight="false">
-        </richtext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><richtext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="false" colorscheme="light" fullheight="true">
-        </richtext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><richtext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="false" colorscheme="" fullheight="false">
-        </richtext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><richtext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="false" colorscheme="" fullheight="true">
-        </richtext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><richtext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </richtext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><richtext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </richtext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><richtext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </richtext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><richtext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </richtext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><richtext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </richtext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <richtext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </richtext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <richtext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </richtext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <richtext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </richtext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <richtext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </richtext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <richtext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </richtext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <richtext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </richtext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <richtext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </richtext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <richtext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </richtext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <richtext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </richtext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <richtext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </richtext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <richtext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </richtext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <richtext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </richtext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <richtext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </richtext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <richtext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </richtext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <richtext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </richtext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <richtext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </richtext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <richtext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </richtext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <richtext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </richtext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <richtext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </richtext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <richtext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </richtext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <richtext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </richtext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <richtext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="false" colorscheme="" fullheight="false">
+            </richtext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <richtext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="false" colorscheme="" fullheight="true">
+            </richtext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <richtext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </richtext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <richtext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </richtext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <richtext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </richtext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <richtext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </richtext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <richtext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </richtext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <richtext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </richtext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><richtext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </richtext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-media/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-media/.content.xml
index 40d67fd83..264cf1c8c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-media/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample-media/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | richtextsample-media"
-            jcr:description="richtextsample-media themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | richtextsample-media"
+          jcr:description="richtextsample-media themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,599 @@
         description="richtextsample-media themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><richtext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </richtext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><richtext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </richtext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><richtext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </richtext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><richtext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </richtext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><richtext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </richtext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><richtext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </richtext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><richtext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </richtext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><richtext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </richtext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><richtext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </richtext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><richtext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </richtext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><richtext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </richtext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><richtext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </richtext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><richtext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </richtext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><richtext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </richtext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><richtext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </richtext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><richtext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </richtext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><richtext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </richtext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><richtext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="false" colorscheme="dark" fullheight="false">
-        </richtext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><richtext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="false" colorscheme="dark" fullheight="true">
-        </richtext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><richtext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="false" colorscheme="light" fullheight="false">
-        </richtext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><richtext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="false" colorscheme="light" fullheight="true">
-        </richtext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><richtext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="false" colorscheme="" fullheight="false">
-        </richtext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><richtext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="false" colorscheme="" fullheight="true">
-        </richtext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><richtext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </richtext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><richtext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </richtext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><richtext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </richtext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><richtext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </richtext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><richtext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </richtext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <richtext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </richtext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <richtext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </richtext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <richtext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </richtext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <richtext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </richtext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - with media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <richtext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </richtext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <richtext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </richtext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <richtext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </richtext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <richtext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </richtext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <richtext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </richtext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <richtext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </richtext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <richtext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </richtext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <richtext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </richtext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <richtext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </richtext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <richtext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </richtext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <richtext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </richtext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <richtext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </richtext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <richtext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </richtext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <richtext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </richtext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <richtext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </richtext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <richtext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </richtext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <richtext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </richtext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <richtext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="false" colorscheme="" fullheight="false">
+            </richtext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <richtext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="false" colorscheme="" fullheight="true">
+            </richtext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <richtext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </richtext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <richtext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </richtext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <richtext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </richtext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <richtext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </richtext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <richtext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </richtext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <richtext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50"
+                text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </richtext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - with media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><richtext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" toppadding="50" bottompadding="50" text="&lt;p&gt;Today's web frontend frameworks allow us to render pages on the device instead of the server. Leveraging client side rendering allows us to transfer only the content when a client clicks from one page to another resulting in a faster page transition and offloading a vast amount of work that is traditionally done on the server to the web browser.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </richtext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample/.content.xml
index ac3d21adc..e085b8260 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/richtext/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | richtextsample"
-            jcr:description="richtextsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | richtextsample"
+          jcr:description="richtextsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="richtextsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><richtext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </richtext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><richtext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </richtext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><richtext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </richtext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><richtext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </richtext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><richtext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </richtext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><richtext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </richtext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><richtext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </richtext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><richtext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </richtext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><richtext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </richtext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><richtext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </richtext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><richtext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </richtext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><richtext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </richtext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><richtext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </richtext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><richtext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </richtext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><richtext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </richtext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><richtext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </richtext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><richtext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </richtext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><richtext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="false" colorscheme="dark" fullheight="false">
-        </richtext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><richtext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="false" colorscheme="dark" fullheight="true">
-        </richtext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><richtext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="false" colorscheme="light" fullheight="false">
-        </richtext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><richtext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="false" colorscheme="light" fullheight="true">
-        </richtext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><richtext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="false" colorscheme="" fullheight="false">
-        </richtext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><richtext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="false" colorscheme="" fullheight="true">
-        </richtext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><richtext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </richtext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><richtext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </richtext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><richtext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </richtext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><richtext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </richtext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><richtext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </richtext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <richtext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </richtext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <richtext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </richtext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <richtext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </richtext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <richtext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </richtext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Rich Text - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <richtext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </richtext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <richtext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </richtext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <richtext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </richtext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <richtext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </richtext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <richtext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </richtext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <richtext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </richtext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <richtext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </richtext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <richtext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </richtext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <richtext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </richtext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <richtext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </richtext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <richtext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </richtext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <richtext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </richtext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <richtext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </richtext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <richtext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </richtext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <richtext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </richtext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <richtext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </richtext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <richtext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </richtext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <richtext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="false" colorscheme="" fullheight="false">
+            </richtext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <richtext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="false" colorscheme="" fullheight="true">
+            </richtext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <richtext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </richtext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <richtext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </richtext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <richtext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </richtext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <richtext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </richtext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <richtext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </richtext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <richtext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext"
+                text="&lt;p&gt;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.&lt;/p&gt;"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </richtext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Rich Text - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><richtext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/richtext" text="&lt;p&gt;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.&lt;/p&gt;" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </richtext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/.content.xml
index 697004bca..1aeeb0235 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | simpletext"
-            jcr:description="simpletext themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | simpletext"
+          jcr:description="simpletext themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,119 +12,153 @@
         description="simpletext themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container12
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container12
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;simple-text&quot;&gt;Simple Text&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;simple-text&quot;&gt;Simple Text&lt;/h1&gt;
 &lt;p&gt;The Simple Text component displays text that is rendered into a single tag type. Great for quickly creating Headings.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text (Text Components)&lt;/h2&gt;">
-        </title2><simpletext3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="">
-        </simpletext3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 (Text Components)&lt;/h2&gt;">
-        </title4><simpletext5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1">
-        </simpletext5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 (Text Components)&lt;/h2&gt;">
-        </title6><simpletext7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2">
-        </simpletext7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example (Text Components)&lt;/h2&gt;">
-        </title8><simpletext9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p">
-        </simpletext9><title10 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text (Text Components)&lt;/h2&gt;">
+            </title2>
+            <simpletext3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="">
+            </simpletext3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 1 (Text Components)&lt;/h2&gt;">
+            </title4>
+            <simpletext5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1">
+            </simpletext5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 2 (Text Components)&lt;/h2&gt;">
+            </title6>
+            <simpletext7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2">
+            </simpletext7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Example (Text Components)&lt;/h2&gt;">
+            </title8>
+            <simpletext9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p">
+            </simpletext9>
+            <title10 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Empty Simple Text Test (Empty)&lt;/h2&gt;">
+            </title10>
+            <simpletext11
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext">
+            </simpletext11>
+        </container12>
+        <pager13
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Empty Simple Text Test (Empty)&lt;/h2&gt;">
-        </title10><simpletext11
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext">
-        </simpletext11>
-        </container12><pager13
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager13>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-blank/.content.xml
index d16a7d0a0..b897dd78f 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | simpletextsample-blank"
-            jcr:description="simpletextsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | simpletextsample-blank"
+          jcr:description="simpletextsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="simpletextsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><simpletext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </simpletext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><simpletext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </simpletext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><simpletext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </simpletext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><simpletext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </simpletext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><simpletext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </simpletext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><simpletext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </simpletext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><simpletext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </simpletext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><simpletext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </simpletext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><simpletext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </simpletext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><simpletext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </simpletext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><simpletext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </simpletext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><simpletext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </simpletext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><simpletext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </simpletext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><simpletext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </simpletext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><simpletext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </simpletext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><simpletext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </simpletext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><simpletext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </simpletext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><simpletext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="false" colorscheme="dark" fullheight="false">
-        </simpletext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><simpletext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="false" colorscheme="dark" fullheight="true">
-        </simpletext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><simpletext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="false" colorscheme="light" fullheight="false">
-        </simpletext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><simpletext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="false" colorscheme="light" fullheight="true">
-        </simpletext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><simpletext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="false" colorscheme="" fullheight="false">
-        </simpletext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><simpletext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="false" colorscheme="" fullheight="true">
-        </simpletext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><simpletext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </simpletext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><simpletext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </simpletext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><simpletext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </simpletext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><simpletext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </simpletext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><simpletext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </simpletext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <simpletext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </simpletext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <simpletext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </simpletext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <simpletext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </simpletext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <simpletext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </simpletext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <simpletext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </simpletext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <simpletext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </simpletext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <simpletext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </simpletext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <simpletext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </simpletext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <simpletext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </simpletext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <simpletext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </simpletext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <simpletext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </simpletext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <simpletext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </simpletext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <simpletext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </simpletext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <simpletext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </simpletext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <simpletext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </simpletext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <simpletext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </simpletext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <simpletext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </simpletext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <simpletext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </simpletext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <simpletext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </simpletext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <simpletext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="false" colorscheme="light" fullheight="false">
+            </simpletext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <simpletext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="false" colorscheme="light" fullheight="true">
+            </simpletext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <simpletext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="false" colorscheme="" fullheight="false">
+            </simpletext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <simpletext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="false" colorscheme="" fullheight="true">
+            </simpletext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <simpletext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </simpletext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <simpletext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </simpletext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <simpletext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </simpletext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <simpletext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </simpletext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <simpletext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </simpletext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <simpletext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text=""
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </simpletext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><simpletext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </simpletext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h1/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h1/.content.xml
index 8600d4faa..d9958164d 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h1/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h1/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | simpletextsample-h1"
-            jcr:description="simpletextsample-h1 themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | simpletextsample-h1"
+          jcr:description="simpletextsample-h1 themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="simpletextsample-h1 themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><simpletext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </simpletext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><simpletext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </simpletext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><simpletext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </simpletext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><simpletext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </simpletext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><simpletext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </simpletext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><simpletext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </simpletext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><simpletext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </simpletext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><simpletext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </simpletext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><simpletext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </simpletext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><simpletext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </simpletext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><simpletext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </simpletext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><simpletext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </simpletext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><simpletext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </simpletext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><simpletext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </simpletext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><simpletext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </simpletext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><simpletext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </simpletext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><simpletext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </simpletext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><simpletext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="false" colorscheme="dark" fullheight="false">
-        </simpletext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><simpletext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="false" colorscheme="dark" fullheight="true">
-        </simpletext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><simpletext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="false" colorscheme="light" fullheight="false">
-        </simpletext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><simpletext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="false" colorscheme="light" fullheight="true">
-        </simpletext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><simpletext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="false" colorscheme="" fullheight="false">
-        </simpletext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><simpletext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="false" colorscheme="" fullheight="true">
-        </simpletext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><simpletext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </simpletext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><simpletext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </simpletext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><simpletext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </simpletext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><simpletext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </simpletext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><simpletext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </simpletext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <simpletext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </simpletext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <simpletext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </simpletext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <simpletext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </simpletext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <simpletext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </simpletext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <simpletext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </simpletext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <simpletext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
+            </simpletext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <simpletext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
+            </simpletext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <simpletext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
+            </simpletext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <simpletext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
+            </simpletext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <simpletext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
+            </simpletext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <simpletext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
+            </simpletext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <simpletext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </simpletext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <simpletext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </simpletext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <simpletext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </simpletext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <simpletext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </simpletext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <simpletext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </simpletext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <simpletext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </simpletext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <simpletext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="false" colorscheme="dark" fullheight="false">
+            </simpletext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <simpletext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="false" colorscheme="dark" fullheight="true">
+            </simpletext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <simpletext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="false" colorscheme="light" fullheight="false">
+            </simpletext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <simpletext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="false" colorscheme="light" fullheight="true">
+            </simpletext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <simpletext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="false" colorscheme="" fullheight="false">
+            </simpletext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <simpletext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="false" colorscheme="" fullheight="true">
+            </simpletext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <simpletext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </simpletext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <simpletext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </simpletext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <simpletext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </simpletext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <simpletext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </simpletext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <simpletext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </simpletext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <simpletext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </simpletext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 1 Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><simpletext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Heading" element="h1" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </simpletext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h2/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h2/.content.xml
index 346198d5b..d7d5d682e 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h2/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample-h2/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | simpletextsample-h2"
-            jcr:description="simpletextsample-h2 themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | simpletextsample-h2"
+          jcr:description="simpletextsample-h2 themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,501 @@
         description="simpletextsample-h2 themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><simpletext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </simpletext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><simpletext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </simpletext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><simpletext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </simpletext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><simpletext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </simpletext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><simpletext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </simpletext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><simpletext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </simpletext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><simpletext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </simpletext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><simpletext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </simpletext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><simpletext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </simpletext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><simpletext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </simpletext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><simpletext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </simpletext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><simpletext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </simpletext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><simpletext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </simpletext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><simpletext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </simpletext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><simpletext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </simpletext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><simpletext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </simpletext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><simpletext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </simpletext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><simpletext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="dark" fullheight="false">
-        </simpletext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><simpletext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="dark" fullheight="true">
-        </simpletext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><simpletext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="light" fullheight="false">
-        </simpletext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><simpletext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="light" fullheight="true">
-        </simpletext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><simpletext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="" fullheight="false">
-        </simpletext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><simpletext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="" fullheight="true">
-        </simpletext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><simpletext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </simpletext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><simpletext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </simpletext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><simpletext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </simpletext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><simpletext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </simpletext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><simpletext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </simpletext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <simpletext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </simpletext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <simpletext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </simpletext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <simpletext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </simpletext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <simpletext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </simpletext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <simpletext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </simpletext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <simpletext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
+            </simpletext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <simpletext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
+            </simpletext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <simpletext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
+            </simpletext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <simpletext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
+            </simpletext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <simpletext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
+            </simpletext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <simpletext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
+            </simpletext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <simpletext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </simpletext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <simpletext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </simpletext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <simpletext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </simpletext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <simpletext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </simpletext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <simpletext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </simpletext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <simpletext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </simpletext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <simpletext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="dark"
+                fullheight="false">
+            </simpletext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <simpletext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="dark"
+                fullheight="true">
+            </simpletext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <simpletext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="light"
+                fullheight="false">
+            </simpletext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <simpletext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme="light"
+                fullheight="true">
+            </simpletext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <simpletext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme=""
+                fullheight="false">
+            </simpletext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <simpletext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="false" colorscheme=""
+                fullheight="true">
+            </simpletext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <simpletext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"
+                fullheight="false">
+            </simpletext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <simpletext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"
+                fullheight="true">
+            </simpletext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <simpletext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"
+                fullheight="false">
+            </simpletext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <simpletext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"
+                fullheight="true">
+            </simpletext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <simpletext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="false">
+            </simpletext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <simpletext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover"
+                backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""
+                fullheight="true">
+            </simpletext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Heading 2 Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><simpletext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="Themeclean Secondary Heading" element="h2" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </simpletext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample/.content.xml
index 3c3620dbd..be704bdb7 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/simpletext/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | simpletextsample"
-            jcr:description="simpletextsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | simpletextsample"
+          jcr:description="simpletextsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="simpletextsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><simpletext2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </simpletext2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><simpletext4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </simpletext4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><simpletext6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </simpletext6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><simpletext8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </simpletext8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><simpletext10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </simpletext10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><simpletext12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </simpletext12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><simpletext14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </simpletext14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><simpletext16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </simpletext16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><simpletext18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </simpletext18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><simpletext20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </simpletext20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><simpletext22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </simpletext22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><simpletext24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </simpletext24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><simpletext26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </simpletext26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><simpletext28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </simpletext28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><simpletext30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </simpletext30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><simpletext32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </simpletext32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><simpletext34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </simpletext34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><simpletext36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="false" colorscheme="dark" fullheight="false">
-        </simpletext36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><simpletext38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="false" colorscheme="dark" fullheight="true">
-        </simpletext38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><simpletext40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="false" colorscheme="light" fullheight="false">
-        </simpletext40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><simpletext42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="false" colorscheme="light" fullheight="true">
-        </simpletext42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><simpletext44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="false" colorscheme="" fullheight="false">
-        </simpletext44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><simpletext46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="false" colorscheme="" fullheight="true">
-        </simpletext46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><simpletext48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </simpletext48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><simpletext50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </simpletext50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><simpletext52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </simpletext52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><simpletext54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </simpletext54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><simpletext56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </simpletext56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <simpletext2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="dark" fullheight="true">
+            </simpletext2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <simpletext4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="false">
+            </simpletext4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <simpletext6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="light" fullheight="true">
+            </simpletext6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <simpletext8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="false">
+            </simpletext8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <simpletext10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0"
+                colorscheme="" fullheight="true">
+            </simpletext10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <simpletext12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="false">
+            </simpletext12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <simpletext14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="dark" fullheight="true">
+            </simpletext14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <simpletext16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="false">
+            </simpletext16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <simpletext18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="light" fullheight="true">
+            </simpletext18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <simpletext20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="false">
+            </simpletext20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <simpletext22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040"
+                color2="#0080ff" colorscheme="" fullheight="true">
+            </simpletext22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <simpletext24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </simpletext24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <simpletext26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </simpletext26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <simpletext28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </simpletext28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <simpletext30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </simpletext30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <simpletext32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </simpletext32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <simpletext34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </simpletext34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <simpletext36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="false" colorscheme="dark" fullheight="false">
+            </simpletext36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <simpletext38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="false" colorscheme="dark" fullheight="true">
+            </simpletext38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <simpletext40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="false" colorscheme="light" fullheight="false">
+            </simpletext40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <simpletext42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="false" colorscheme="light" fullheight="true">
+            </simpletext42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <simpletext44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="false" colorscheme="" fullheight="false">
+            </simpletext44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <simpletext46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="false" colorscheme="" fullheight="true">
+            </simpletext46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <simpletext48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </simpletext48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <simpletext50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </simpletext50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <simpletext52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </simpletext52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <simpletext54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </simpletext54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <simpletext56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </simpletext56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <simpletext58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext"
+                text="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."
+                element="p" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </simpletext58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><simpletext58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/simpletext" text="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." element="p" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </simpletext58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/.content.xml
index 199cf10af..de53a7178 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | socialicons"
-            jcr:description="socialicons themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | socialicons"
+          jcr:description="socialicons themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,89 +12,123 @@
         description="socialicons themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container9
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container9
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;social-icons&quot;&gt;Social Icons&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;social-icons&quot;&gt;Social Icons&lt;/h1&gt;
 &lt;p&gt;The Social Icons component is used in the footer to provide links to your sites relevant social media.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Social Icons (.hidden)&lt;/h2&gt;">
+            </title2>
+            <socialicons8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c3
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c4>
+                    <c5
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c7>
+                </icons>
+            </socialicons8>
+        </container9>
+        <pager10
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons (.hidden)&lt;/h2&gt;">
-        </title2><socialicons8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"><icons jcr:primaryType="nt:unstructured"><c3
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c7></icons>
-        </socialicons8>
-        </container9><pager10
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager10>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/sample/.content.xml
index d8c18633f..89acf0ebd 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/socialicons/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | socialiconssample"
-            jcr:description="socialiconssample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | socialiconssample"
+          jcr:description="socialiconssample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,636 +12,1121 @@
         description="socialiconssample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container204
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><socialicons7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c6></icons>
-        </socialicons7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title8><socialicons14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c9
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c11><c12
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c13></icons>
-        </socialicons14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title15><socialicons21
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c16
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c19><c20
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c20></icons>
-        </socialicons21><title22 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title22><socialicons28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c23
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c24><c25
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c25><c26
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c27></icons>
-        </socialicons28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><socialicons35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c31><c32
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c34></icons>
-        </socialicons35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><socialicons42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c39><c40
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c40><c41
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c41></icons>
-        </socialicons42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title43><socialicons49
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c44
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c44><c45
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c45><c46
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c48></icons>
-        </socialicons49><title50 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title50><socialicons56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c51
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c51><c52
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c55></icons>
-        </socialicons56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><socialicons63
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c59><c60
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c60><c61
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c61><c62
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c62></icons>
-        </socialicons63><title64 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title64><socialicons70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c65
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c65><c66
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c69></icons>
-        </socialicons70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><socialicons77
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c75><c76
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c76></icons>
-        </socialicons77><title78 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title78><socialicons84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c79
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c79><c80
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c80><c81
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c81><c82
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c83></icons>
-        </socialicons84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title85><socialicons91
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c89><c90
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c90></icons>
-        </socialicons91><title92 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title92><socialicons98
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c93
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c95><c96
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c96><c97
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c97></icons>
-        </socialicons98><title99 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title99><socialicons105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c100
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c100><c101
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c101><c102
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c104></icons>
-        </socialicons105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><socialicons112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c109><c110
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c111></icons>
-        </socialicons112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><socialicons119
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c115><c116
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c116><c117
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c118></icons>
-        </socialicons119><title120 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title120><socialicons126
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="false" colorscheme="dark" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c121
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c121><c122
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c124><c125
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c125></icons>
-        </socialicons126><title127 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title127><socialicons133
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="false" colorscheme="dark" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c128
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c129><c130
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c130><c131
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c131><c132
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c132></icons>
-        </socialicons133><title134 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title134><socialicons140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="false" colorscheme="light" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c135
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c135><c136
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c136><c137
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c139></icons>
-        </socialicons140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><socialicons147
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="false" colorscheme="light" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c144><c145
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c145><c146
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c146></icons>
-        </socialicons147><title148 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title148><socialicons154
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="false" colorscheme="" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c149
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c149><c150
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c150><c151
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c151><c152
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c152><c153
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c153></icons>
-        </socialicons154><title155 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title155><socialicons161
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="false" colorscheme="" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c156
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c156><c157
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c157><c158
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c158><c159
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c159><c160
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c160></icons>
-        </socialicons161><title162 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title162><socialicons168
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c163
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c163><c164
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c164><c165
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c165><c166
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c166><c167
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c167></icons>
-        </socialicons168><title169 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title169><socialicons175
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c170
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c170><c171
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c171><c172
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c172><c173
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c173><c174
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c174></icons>
-        </socialicons175><title176 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title176><socialicons182
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c177
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c177><c178
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c178><c179
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c179><c180
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c180><c181
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c181></icons>
-        </socialicons182><title183 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title183><socialicons189
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c184
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c184><c185
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c185><c186
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c186><c187
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c187><c188
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c188></icons>
-        </socialicons189><title190 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title190><socialicons196
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><icons jcr:primaryType="nt:unstructured"><c191
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c191><c192
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c192><c193
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c193><c194
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c194><c195
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c195></icons>
-        </socialicons196><title197 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container204
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <socialicons7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c4>
+                    <c5
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c6>
+                </icons>
+            </socialicons7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title8>
+            <socialicons14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c9
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c11>
+                    <c12
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c13>
+                </icons>
+            </socialicons14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title15>
+            <socialicons21
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c16
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c19>
+                    <c20
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c20>
+                </icons>
+            </socialicons21>
+            <title22 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title22>
+            <socialicons28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c23
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c24>
+                    <c25
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c25>
+                    <c26
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c27>
+                </icons>
+            </socialicons28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <socialicons35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c31>
+                    <c32
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c34>
+                </icons>
+            </socialicons35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <socialicons42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c39>
+                    <c40
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c40>
+                    <c41
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c41>
+                </icons>
+            </socialicons42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title43>
+            <socialicons49
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c44
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c44>
+                    <c45
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c45>
+                    <c46
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c48>
+                </icons>
+            </socialicons49>
+            <title50 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title50>
+            <socialicons56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c51
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c51>
+                    <c52
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c55>
+                </icons>
+            </socialicons56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <socialicons63
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c59>
+                    <c60
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c60>
+                    <c61
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c61>
+                    <c62
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c62>
+                </icons>
+            </socialicons63>
+            <title64 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title64>
+            <socialicons70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c65
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c65>
+                    <c66
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c69>
+                </icons>
+            </socialicons70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <socialicons77
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c75>
+                    <c76
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c76>
+                </icons>
+            </socialicons77>
+            <title78 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title78>
+            <socialicons84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c79
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c79>
+                    <c80
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c80>
+                    <c81
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c81>
+                    <c82
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c83>
+                </icons>
+            </socialicons84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title85>
+            <socialicons91
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c89>
+                    <c90
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c90>
+                </icons>
+            </socialicons91>
+            <title92 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title92>
+            <socialicons98
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c93
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c95>
+                    <c96
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c96>
+                    <c97
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c97>
+                </icons>
+            </socialicons98>
+            <title99 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title99>
+            <socialicons105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c100
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c100>
+                    <c101
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c101>
+                    <c102
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c104>
+                </icons>
+            </socialicons105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <socialicons112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c109>
+                    <c110
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c111>
+                </icons>
+            </socialicons112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <socialicons119
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c115>
+                    <c116
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c116>
+                    <c117
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c118>
+                </icons>
+            </socialicons119>
+            <title120 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title120>
+            <socialicons126
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c121
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c121>
+                    <c122
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c124>
+                    <c125
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c125>
+                </icons>
+            </socialicons126>
+            <title127 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title127>
+            <socialicons133
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c128
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c129>
+                    <c130
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c130>
+                    <c131
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c131>
+                    <c132
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c132>
+                </icons>
+            </socialicons133>
+            <title134 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title134>
+            <socialicons140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c135
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c135>
+                    <c136
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c136>
+                    <c137
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c139>
+                </icons>
+            </socialicons140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <socialicons147
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c144>
+                    <c145
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c145>
+                    <c146
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c146>
+                </icons>
+            </socialicons147>
+            <title148 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title148>
+            <socialicons154
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="false" colorscheme="" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c149
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c149>
+                    <c150
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c150>
+                    <c151
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c151>
+                    <c152
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c152>
+                    <c153
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c153>
+                </icons>
+            </socialicons154>
+            <title155 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title155>
+            <socialicons161
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="false" colorscheme="" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c156
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c156>
+                    <c157
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c157>
+                    <c158
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c158>
+                    <c159
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c159>
+                    <c160
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c160>
+                </icons>
+            </socialicons161>
+            <title162 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title162>
+            <socialicons168
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c163
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c163>
+                    <c164
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c164>
+                    <c165
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c165>
+                    <c166
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c166>
+                    <c167
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c167>
+                </icons>
+            </socialicons168>
+            <title169 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title169>
+            <socialicons175
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c170
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c170>
+                    <c171
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c171>
+                    <c172
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c172>
+                    <c173
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c173>
+                    <c174
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c174>
+                </icons>
+            </socialicons175>
+            <title176 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title176>
+            <socialicons182
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c177
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c177>
+                    <c178
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c178>
+                    <c179
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c179>
+                    <c180
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c180>
+                    <c181
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c181>
+                </icons>
+            </socialicons182>
+            <title183 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title183>
+            <socialicons189
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c184
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c184>
+                    <c185
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c185>
+                    <c186
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c186>
+                    <c187
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c187>
+                    <c188
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c188>
+                </icons>
+            </socialicons189>
+            <title190 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title190>
+            <socialicons196
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c191
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c191>
+                    <c192
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c192>
+                    <c193
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c193>
+                    <c194
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c194>
+                    <c195
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c195>
+                </icons>
+            </socialicons196>
+            <title197 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title197>
+            <socialicons203
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <icons jcr:primaryType="nt:unstructured">
+                    <c198
+                        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook"
+                        iconalttext="Facebook">
+                    </c198>
+                    <c199
+                        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter"
+                        iconalttext="Twitter">
+                    </c199>
+                    <c200
+                        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram"
+                        iconalttext="Instagram">
+                    </c200>
+                    <c201
+                        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest"
+                        iconalttext="Pinterest">
+                    </c201>
+                    <c202
+                        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube"
+                        iconalttext="Youtube">
+                    </c202>
+                </icons>
+            </socialicons203>
+        </container204>
+        <pager205
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Social Icons Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title197><socialicons203
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/socialicons" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><icons jcr:primaryType="nt:unstructured"><c198
-        jcr:primaryType="nt:unstructured" url="https://www.facebook.com/" icon="facebook" iconalttext="Facebook">
-        </c198><c199
-        jcr:primaryType="nt:unstructured" url="https://twitter.com/" icon="twitter" iconalttext="Twitter">
-        </c199><c200
-        jcr:primaryType="nt:unstructured" url="https://www.instagram.com/" icon="instagram" iconalttext="Instagram">
-        </c200><c201
-        jcr:primaryType="nt:unstructured" url="https://www.pinterest.com/" icon="pinterest" iconalttext="Pinterest">
-        </c201><c202
-        jcr:primaryType="nt:unstructured" url="https://www.youtube.com/" icon="youtube" iconalttext="Youtube">
-        </c202></icons>
-        </socialicons203>
-        </container204><pager205
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager205>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/.content.xml
index 84192ccdf..3c6bedbe4 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | spacer"
-            jcr:description="spacer themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | spacer"
+          jcr:description="spacer themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,109 +12,139 @@
         description="spacer themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container10
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container10
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;spacer&quot;&gt;Spacer&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;spacer&quot;&gt;Spacer&lt;/h1&gt;
 &lt;p&gt;The Spacer component is a very simple Block, allowing you to add extra space with or without a background to your page.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) (.hidden)&lt;/h2&gt;">
-        </title2><spacer3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20">
-        </spacer3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image (Chrome)&lt;/h2&gt;">
-        </title4><spacer5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
-        </spacer5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Chrome)&lt;/h2&gt;">
-        </title6><spacer7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20">
-        </spacer7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer (Empty) (.hidden)&lt;/h2&gt;">
+            </title2>
+            <spacer3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20">
+            </spacer3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer - Image (Chrome)&lt;/h2&gt;">
+            </title4>
+            <spacer5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg">
+            </spacer5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer (Chrome)&lt;/h2&gt;">
+            </title6>
+            <spacer7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20">
+            </spacer7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Empty Spacer (Empty)&lt;/h2&gt;">
+            </title8>
+            <spacer9
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer">
+            </spacer9>
+        </container10>
+        <pager11
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Empty Spacer (Empty)&lt;/h2&gt;">
-        </title8><spacer9
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer">
-        </spacer9>
-        </container10><pager11
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager11>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-blank/.content.xml
index d76df991a..bbb220471 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | spacersample-blank"
-            jcr:description="spacersample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | spacersample-blank"
+          jcr:description="spacersample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="spacersample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><spacer2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </spacer2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><spacer4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </spacer4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><spacer6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </spacer6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><spacer8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </spacer8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><spacer10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </spacer10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><spacer12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </spacer12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><spacer14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </spacer14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><spacer16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </spacer16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><spacer18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </spacer18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><spacer20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </spacer20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><spacer22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </spacer22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><spacer24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </spacer24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><spacer26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </spacer26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><spacer28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </spacer28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><spacer30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </spacer30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><spacer32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </spacer32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><spacer34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </spacer34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><spacer36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="dark" fullheight="false">
-        </spacer36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><spacer38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="dark" fullheight="true">
-        </spacer38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><spacer40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="light" fullheight="false">
-        </spacer40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><spacer42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="light" fullheight="true">
-        </spacer42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><spacer44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="" fullheight="false">
-        </spacer44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><spacer46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="" fullheight="true">
-        </spacer46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><spacer48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </spacer48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><spacer50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </spacer50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><spacer52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </spacer52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><spacer54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </spacer54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><spacer56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </spacer56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <spacer2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </spacer2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <spacer4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </spacer4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <spacer6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </spacer6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <spacer8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </spacer8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <spacer10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </spacer10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <spacer12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </spacer12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <spacer14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </spacer14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <spacer16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </spacer16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <spacer18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </spacer18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <spacer20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </spacer20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <spacer22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </spacer22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <spacer24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </spacer24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <spacer26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </spacer26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <spacer28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </spacer28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <spacer30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </spacer30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <spacer32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </spacer32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <spacer34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </spacer34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <spacer36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </spacer36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <spacer38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </spacer38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <spacer40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </spacer40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <spacer42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </spacer42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <spacer44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="" fullheight="false">
+            </spacer44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <spacer46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="" fullheight="true">
+            </spacer46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <spacer48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </spacer48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <spacer50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </spacer50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <spacer52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </spacer52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <spacer54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </spacer54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <spacer56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </spacer56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <spacer58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </spacer58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer (Empty) Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><spacer58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </spacer58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-image/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-image/.content.xml
index 46b493391..af2f2decc 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-image/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample-image/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | spacersample-image"
-            jcr:description="spacersample-image themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | spacersample-image"
+          jcr:description="spacersample-image themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,515 @@
         description="spacersample-image themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><spacer2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </spacer2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><spacer4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </spacer4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><spacer6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </spacer6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><spacer8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </spacer8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><spacer10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </spacer10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><spacer12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </spacer12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><spacer14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </spacer14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><spacer16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </spacer16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><spacer18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </spacer18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><spacer20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </spacer20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><spacer22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </spacer22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><spacer24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" colorscheme="dark" fullheight="false">
-        </spacer24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><spacer26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" colorscheme="dark" fullheight="true">
-        </spacer26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><spacer28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" colorscheme="light" fullheight="false">
-        </spacer28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><spacer30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" colorscheme="light" fullheight="true">
-        </spacer30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><spacer32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" colorscheme="" fullheight="false">
-        </spacer32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><spacer34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" colorscheme="" fullheight="true">
-        </spacer34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><spacer36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </spacer36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><spacer38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </spacer38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><spacer40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </spacer40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><spacer42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </spacer42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><spacer44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </spacer44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><spacer46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </spacer46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><spacer48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </spacer48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><spacer50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </spacer50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><spacer52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </spacer52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><spacer54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </spacer54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><spacer56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </spacer56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <spacer2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </spacer2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <spacer4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </spacer4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <spacer6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </spacer6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <spacer8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </spacer8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer - Image Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <spacer10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </spacer10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <spacer12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
+            </spacer12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <spacer14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
+            </spacer14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <spacer16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
+            </spacer16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <spacer18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
+            </spacer18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <spacer20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
+            </spacer20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <spacer22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
+            </spacer22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <spacer24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" colorscheme="dark" fullheight="false">
+            </spacer24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <spacer26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" colorscheme="dark" fullheight="true">
+            </spacer26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <spacer28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" colorscheme="light" fullheight="false">
+            </spacer28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <spacer30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" colorscheme="light" fullheight="true">
+            </spacer30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <spacer32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" colorscheme="" fullheight="false">
+            </spacer32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <spacer34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" colorscheme="" fullheight="true">
+            </spacer34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <spacer36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </spacer36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <spacer38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </spacer38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <spacer40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </spacer40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <spacer42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </spacer42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <spacer44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </spacer44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <spacer46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </spacer46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <spacer48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"
+                fullheight="false">
+            </spacer48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <spacer50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </spacer50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <spacer52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"
+                fullheight="false">
+            </spacer52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <spacer54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"
+                fullheight="true">
+            </spacer54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <spacer56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </spacer56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <spacer58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </spacer58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer - Image Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><spacer58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="80" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </spacer58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample/.content.xml
index 5db3b0756..b5d94579c 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/spacer/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | spacersample"
-            jcr:description="spacersample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | spacersample"
+          jcr:description="spacersample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="spacersample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><spacer2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </spacer2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><spacer4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </spacer4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><spacer6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </spacer6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><spacer8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </spacer8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><spacer10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </spacer10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><spacer12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </spacer12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><spacer14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </spacer14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><spacer16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </spacer16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><spacer18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </spacer18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><spacer20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </spacer20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><spacer22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </spacer22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><spacer24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </spacer24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><spacer26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </spacer26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><spacer28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </spacer28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><spacer30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </spacer30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><spacer32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </spacer32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><spacer34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </spacer34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><spacer36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="dark" fullheight="false">
-        </spacer36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><spacer38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="dark" fullheight="true">
-        </spacer38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><spacer40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="light" fullheight="false">
-        </spacer40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><spacer42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="light" fullheight="true">
-        </spacer42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><spacer44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="" fullheight="false">
-        </spacer44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><spacer46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="false" colorscheme="" fullheight="true">
-        </spacer46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><spacer48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </spacer48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><spacer50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </spacer50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><spacer52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </spacer52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><spacer54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </spacer54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><spacer56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </spacer56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <spacer2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </spacer2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <spacer4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </spacer4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <spacer6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </spacer6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <spacer8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </spacer8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Spacer Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <spacer10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </spacer10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <spacer12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </spacer12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <spacer14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </spacer14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <spacer16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </spacer16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <spacer18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </spacer18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <spacer20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </spacer20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <spacer22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </spacer22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <spacer24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </spacer24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <spacer26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </spacer26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <spacer28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </spacer28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <spacer30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </spacer30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <spacer32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </spacer32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <spacer34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </spacer34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <spacer36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </spacer36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <spacer38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </spacer38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <spacer40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </spacer40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <spacer42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </spacer42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <spacer44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="" fullheight="false">
+            </spacer44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <spacer46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="false" colorscheme="" fullheight="true">
+            </spacer46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <spacer48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </spacer48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <spacer50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </spacer50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <spacer52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </spacer52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <spacer54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </spacer54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <spacer56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </spacer56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <spacer58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </spacer58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Spacer Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><spacer58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/spacer" height="20" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </spacer58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/.content.xml
index 96e1be53c..740ffe5bc 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | tabs"
-            jcr:description="tabs themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | tabs"
+          jcr:description="tabs themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,137 +12,214 @@
         description="tabs themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container21
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container21
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;tabs&quot;&gt;Tabs&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;tabs&quot;&gt;Tabs&lt;/h1&gt;
 &lt;p&gt;The Tabs component displays a list of content, but with only 1 active piece of content at a time.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs (Features)&lt;/h2&gt;">
-        </title2><tabs3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media (Features)&lt;/h2&gt;">
-        </title4><tabs8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination"><tabs jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c7></tabs>
-        </tabs8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles (.hidden)&lt;/h2&gt;">
-        </title9><tabs13
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200"><tabs jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c11><c12
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c12></tabs>
-        </tabs13><title14 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example (Features)&lt;/h2&gt;">
-        </title14><tabs18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200"><tabs jcr:primaryType="nt:unstructured"><c15
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c15><c16
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c16><c17
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c17></tabs>
-        </tabs18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs (Features)&lt;/h2&gt;">
+            </title2>
+            <tabs3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs - Media (Features)&lt;/h2&gt;">
+            </title4>
+            <tabs8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c7>
+                </tabs>
+            </tabs8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs With All RTE Styles (.hidden)&lt;/h2&gt;">
+            </title9>
+            <tabs13
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c11>
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c12>
+                </tabs>
+            </tabs13>
+            <title14 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example (Features)&lt;/h2&gt;">
+            </title14>
+            <tabs18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c15
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c15>
+                    <c16
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c16>
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c17>
+                </tabs>
+            </tabs18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs no default values (Empty)&lt;/h2&gt;">
+            </title19>
+            <tabs20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs20>
+        </container21>
+        <pager22
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs no default values (Empty)&lt;/h2&gt;">
-        </title19><tabs20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs20>
-        </container21><pager22
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager22>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-blank/.content.xml
index a91c6c518..16b773556 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | tabssample-blank"
-            jcr:description="tabssample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | tabssample-blank"
+          jcr:description="tabssample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,512 @@
         description="tabssample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><tabs2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><tabs4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><tabs6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><tabs8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><tabs10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><tabs12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><tabs14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><tabs16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><tabs18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><tabs20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><tabs22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><tabs24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><tabs26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><tabs28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><tabs30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><tabs32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><tabs34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><tabs36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="false" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><tabs38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="false" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><tabs40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="false" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><tabs42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="false" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><tabs44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="false" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><tabs46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="false" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><tabs48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><tabs50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><tabs52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><tabs54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><tabs56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <tabs2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <tabs4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <tabs6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <tabs8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <tabs10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <tabs12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <tabs14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <tabs16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <tabs18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <tabs20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <tabs22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <tabs24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <tabs26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <tabs28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <tabs30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <tabs32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <tabs34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <tabs36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <tabs38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <tabs40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <tabs42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <tabs44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="false" colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <tabs46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="false" colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <tabs48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <tabs50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <tabs52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <tabs54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <tabs56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <tabs58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <tabs jcr:primaryType="nt:unstructured"></tabs>
+            </tabs58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><tabs58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><tabs jcr:primaryType="nt:unstructured"></tabs>
-        </tabs58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-media/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-media/.content.xml
index f77ab740b..e1b1ffe9e 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-media/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-media/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | tabssample-media"
-            jcr:description="tabssample-media themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | tabssample-media"
+          jcr:description="tabssample-media themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1052 @@
         description="tabssample-media themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><tabs5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c4></tabs>
-        </tabs5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><tabs10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c9></tabs>
-        </tabs10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><tabs15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c14></tabs>
-        </tabs15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><tabs20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c19></tabs>
-        </tabs20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><tabs25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c24></tabs>
-        </tabs25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><tabs30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c29></tabs>
-        </tabs30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><tabs35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c34></tabs>
-        </tabs35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><tabs40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c39></tabs>
-        </tabs40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><tabs45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c44></tabs>
-        </tabs45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><tabs50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c49></tabs>
-        </tabs50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><tabs55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c54></tabs>
-        </tabs55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><tabs60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c59></tabs>
-        </tabs60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><tabs65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c64></tabs>
-        </tabs65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><tabs70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c69></tabs>
-        </tabs70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><tabs75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c74></tabs>
-        </tabs75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><tabs80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c79></tabs>
-        </tabs80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><tabs85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c84></tabs>
-        </tabs85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><tabs90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="false" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c89></tabs>
-        </tabs90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><tabs95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="false" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c94></tabs>
-        </tabs95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><tabs100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="false" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c99></tabs>
-        </tabs100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><tabs105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="false" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c104></tabs>
-        </tabs105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><tabs110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="false" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c109></tabs>
-        </tabs110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><tabs115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="false" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c114></tabs>
-        </tabs115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><tabs120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c119></tabs>
-        </tabs120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><tabs125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c124></tabs>
-        </tabs125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><tabs130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c129></tabs>
-        </tabs130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><tabs135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c134></tabs>
-        </tabs135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><tabs140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c139></tabs>
-        </tabs140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <tabs5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c4>
+                </tabs>
+            </tabs5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <tabs10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c9>
+                </tabs>
+            </tabs10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <tabs15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c14>
+                </tabs>
+            </tabs15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <tabs20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c19>
+                </tabs>
+            </tabs20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <tabs25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c24>
+                </tabs>
+            </tabs25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <tabs30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c29>
+                </tabs>
+            </tabs30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <tabs35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c34>
+                </tabs>
+            </tabs35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <tabs40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c39>
+                </tabs>
+            </tabs40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <tabs45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c44>
+                </tabs>
+            </tabs45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <tabs50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c49>
+                </tabs>
+            </tabs50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <tabs55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c54>
+                </tabs>
+            </tabs55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <tabs60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c59>
+                </tabs>
+            </tabs60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <tabs65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c64>
+                </tabs>
+            </tabs65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <tabs70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c69>
+                </tabs>
+            </tabs70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <tabs75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c74>
+                </tabs>
+            </tabs75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <tabs80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c79>
+                </tabs>
+            </tabs80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <tabs85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c84>
+                </tabs>
+            </tabs85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <tabs90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="false" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c89>
+                </tabs>
+            </tabs90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <tabs95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="false" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c94>
+                </tabs>
+            </tabs95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <tabs100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="false" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c99>
+                </tabs>
+            </tabs100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <tabs105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="false" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c104>
+                </tabs>
+            </tabs105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <tabs110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="false" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c109>
+                </tabs>
+            </tabs110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <tabs115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="false" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c114>
+                </tabs>
+            </tabs115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <tabs120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c119>
+                </tabs>
+            </tabs120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <tabs125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c124>
+                </tabs>
+            </tabs125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <tabs130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c129>
+                </tabs>
+            </tabs130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <tabs135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c134>
+                </tabs>
+            </tabs135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <tabs140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c139>
+                </tabs>
+            </tabs140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <tabs145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg"
+                mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c144>
+                </tabs>
+            </tabs145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><tabs145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="true" mediaposition="before" mediatype="image" mediawidth="33" mediaiconsize="200" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediatitle="Tropical sailing destination" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c144></tabs>
-        </tabs145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-rte/.content.xml
index b511baf8c..1525f57a1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | tabssample-rte"
-            jcr:description="tabssample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | tabssample-rte"
+          jcr:description="tabssample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1052 @@
         description="tabssample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><tabs5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c4></tabs>
-        </tabs5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><tabs10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c9></tabs>
-        </tabs10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><tabs15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c14></tabs>
-        </tabs15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><tabs20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c19></tabs>
-        </tabs20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><tabs25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c24></tabs>
-        </tabs25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><tabs30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c29></tabs>
-        </tabs30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><tabs35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c34></tabs>
-        </tabs35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><tabs40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c39></tabs>
-        </tabs40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><tabs45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c44></tabs>
-        </tabs45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><tabs50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c49></tabs>
-        </tabs50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><tabs55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c54></tabs>
-        </tabs55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><tabs60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c59></tabs>
-        </tabs60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><tabs65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c64></tabs>
-        </tabs65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><tabs70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c69></tabs>
-        </tabs70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><tabs75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c74></tabs>
-        </tabs75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><tabs80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c79></tabs>
-        </tabs80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><tabs85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c84></tabs>
-        </tabs85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><tabs90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c89></tabs>
-        </tabs90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><tabs95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c94></tabs>
-        </tabs95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><tabs100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c99></tabs>
-        </tabs100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><tabs105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c104></tabs>
-        </tabs105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><tabs110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c109></tabs>
-        </tabs110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><tabs115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c114></tabs>
-        </tabs115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><tabs120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c119></tabs>
-        </tabs120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><tabs125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c124></tabs>
-        </tabs125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><tabs130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c129></tabs>
-        </tabs130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><tabs135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c134></tabs>
-        </tabs135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><tabs140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c139></tabs>
-        </tabs140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <tabs5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c4>
+                </tabs>
+            </tabs5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <tabs10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c9>
+                </tabs>
+            </tabs10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <tabs15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c14>
+                </tabs>
+            </tabs15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <tabs20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c19>
+                </tabs>
+            </tabs20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <tabs25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c24>
+                </tabs>
+            </tabs25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <tabs30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c29>
+                </tabs>
+            </tabs30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <tabs35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c34>
+                </tabs>
+            </tabs35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <tabs40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c39>
+                </tabs>
+            </tabs40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <tabs45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c44>
+                </tabs>
+            </tabs45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <tabs50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c49>
+                </tabs>
+            </tabs50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <tabs55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c54>
+                </tabs>
+            </tabs55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <tabs60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c59>
+                </tabs>
+            </tabs60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <tabs65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c64>
+                </tabs>
+            </tabs65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <tabs70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c69>
+                </tabs>
+            </tabs70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <tabs75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c74>
+                </tabs>
+            </tabs75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <tabs80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c79>
+                </tabs>
+            </tabs80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <tabs85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c84>
+                </tabs>
+            </tabs85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <tabs90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c89>
+                </tabs>
+            </tabs90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <tabs95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c94>
+                </tabs>
+            </tabs95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <tabs100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c99>
+                </tabs>
+            </tabs100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <tabs105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c104>
+                </tabs>
+            </tabs105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <tabs110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c109>
+                </tabs>
+            </tabs110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <tabs115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c114>
+                </tabs>
+            </tabs115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <tabs120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c119>
+                </tabs>
+            </tabs120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <tabs125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c124>
+                </tabs>
+            </tabs125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <tabs130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c129>
+                </tabs>
+            </tabs130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <tabs135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c134>
+                </tabs>
+            </tabs135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <tabs140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c139>
+                </tabs>
+            </tabs140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <tabs145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                        title="Learn More">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c144>
+                </tabs>
+            </tabs145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><tabs145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" title="Learn More">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c144></tabs>
-        </tabs145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample/.content.xml
index 2af874d24..b9c8f9af5 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tabs/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | tabssample"
-            jcr:description="tabssample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | tabssample"
+          jcr:description="tabssample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,1052 @@
         description="tabssample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><tabs5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c4></tabs>
-        </tabs5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><tabs10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c9></tabs>
-        </tabs10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><tabs15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c14></tabs>
-        </tabs15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><tabs20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c19></tabs>
-        </tabs20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><tabs25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0" color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c24></tabs>
-        </tabs25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><tabs30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c29></tabs>
-        </tabs30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><tabs35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c34></tabs>
-        </tabs35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><tabs40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c39></tabs>
-        </tabs40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><tabs45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c44></tabs>
-        </tabs45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><tabs50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c49></tabs>
-        </tabs50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><tabs55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040" color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c54></tabs>
-        </tabs55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><tabs60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c59></tabs>
-        </tabs60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><tabs65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c64></tabs>
-        </tabs65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><tabs70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c69></tabs>
-        </tabs70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><tabs75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c74></tabs>
-        </tabs75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><tabs80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c79></tabs>
-        </tabs80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><tabs85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c84></tabs>
-        </tabs85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><tabs90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c89></tabs>
-        </tabs90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><tabs95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c94></tabs>
-        </tabs95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><tabs100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c99></tabs>
-        </tabs100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><tabs105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c104></tabs>
-        </tabs105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><tabs110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c109></tabs>
-        </tabs110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><tabs115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c114></tabs>
-        </tabs115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><tabs120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c119></tabs>
-        </tabs120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><tabs125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><tabs jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c124></tabs>
-        </tabs125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><tabs130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c129></tabs>
-        </tabs130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><tabs135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><tabs jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c134></tabs>
-        </tabs135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><tabs140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c139></tabs>
-        </tabs140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <tabs5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c4>
+                </tabs>
+            </tabs5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <tabs10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c9>
+                </tabs>
+            </tabs10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <tabs15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c14>
+                </tabs>
+            </tabs15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <tabs20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="false" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c19>
+                </tabs>
+            </tabs20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <tabs25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff80c0"
+                color2="#e7e7e7" fullheight="true" backgroundtype="color" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c24>
+                </tabs>
+            </tabs25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <tabs30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c29>
+                </tabs>
+            </tabs30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <tabs35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c34>
+                </tabs>
+            </tabs35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <tabs40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c39>
+                </tabs>
+            </tabs40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <tabs45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c44>
+                </tabs>
+            </tabs45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <tabs50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c49>
+                </tabs>
+            </tabs50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <tabs55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ff8040"
+                color2="#0080ff" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c54>
+                </tabs>
+            </tabs55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <tabs60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c59>
+                </tabs>
+            </tabs60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <tabs65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c64>
+                </tabs>
+            </tabs65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <tabs70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c69>
+                </tabs>
+            </tabs70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <tabs75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c74>
+                </tabs>
+            </tabs75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <tabs80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c79>
+                </tabs>
+            </tabs80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <tabs85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="image" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c84>
+                </tabs>
+            </tabs85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <tabs90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c89>
+                </tabs>
+            </tabs90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <tabs95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c94>
+                </tabs>
+            </tabs95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <tabs100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c99>
+                </tabs>
+            </tabs100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <tabs105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c104>
+                </tabs>
+            </tabs105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <tabs110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c109>
+                </tabs>
+            </tabs110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <tabs115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="gradient" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="false" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c114>
+                </tabs>
+            </tabs115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <tabs120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c119>
+                </tabs>
+            </tabs120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <tabs125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c124>
+                </tabs>
+            </tabs125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <tabs130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c129>
+                </tabs>
+            </tabs130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <tabs135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c134>
+                </tabs>
+            </tabs135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <tabs140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="false" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c139>
+                </tabs>
+            </tabs140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <tabs145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff"
+                color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10"
+                showmedia="false" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before"
+                mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <tabs jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;"
+                        title="Learn More">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="Contact Us">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured"
+                        text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;"
+                        title="About Us">
+                    </c144>
+                </tabs>
+            </tabs145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tabs - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><tabs145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tabs" bgcolor="#ffffff" color2="#e7e7e7" fullheight="true" backgroundtype="video" bottompadding="40" toppadding="10" showmedia="false" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-clouds-daytime_small.jpg" mediaposition="before" mediawidth="33" mediaiconsize="200" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><tabs jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt;" title="Learn More">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="Contact Us">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" text="&lt;p&gt;Again when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting&lt;/p&gt;" title="About Us">
-        </c144></tabs>
-        </tabs145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/.content.xml
index 5afef2742..bdfc29260 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | tags"
-            jcr:description="tags themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | tags"
+          jcr:description="tags themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,79 +12,102 @@
         description="tags themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container4
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container4
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;tags&quot;&gt;Tags&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;tags&quot;&gt;Tags&lt;/h1&gt;
 &lt;p&gt;Display the tags that are attached to this page.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tags (Chrome)&lt;/h2&gt;">
+            </title2>
+            <tags3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30">
+            </tags3>
+        </container4>
+        <pager5
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags (Chrome)&lt;/h2&gt;">
-        </title2><tags3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30">
-        </tags3>
-        </container4><pager5
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager5>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/sample/.content.xml
index 7e92c2df2..3b3f4be43 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/tags/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | tagssample"
-            jcr:description="tagssample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | tagssample"
+          jcr:description="tagssample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="tagssample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><tags2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </tags2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><tags4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </tags4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><tags6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </tags6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><tags8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </tags8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><tags10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </tags10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><tags12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </tags12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><tags14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </tags14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><tags16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </tags16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><tags18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </tags18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><tags20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </tags20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><tags22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </tags22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><tags24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </tags24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><tags26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </tags26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><tags28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </tags28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><tags30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </tags30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><tags32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </tags32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><tags34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </tags34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><tags36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
-        </tags36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><tags38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
-        </tags38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><tags40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
-        </tags40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><tags42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
-        </tags42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><tags44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
-        </tags44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><tags46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
-        </tags46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><tags48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </tags48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><tags50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </tags50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><tags52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </tags52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><tags54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </tags54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><tags56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </tags56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <tags2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
+            </tags2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <tags4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="light" fullheight="false">
+            </tags4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <tags6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="light" fullheight="true">
+            </tags6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <tags8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="" fullheight="false">
+            </tags8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Tags Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <tags10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="color"
+                bgcolor="#ff80c0" colorscheme="" fullheight="true">
+            </tags10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <tags12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
+            </tags12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <tags14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
+            </tags14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <tags16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
+            </tags16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <tags18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
+            </tags18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <tags20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
+            </tags20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <tags22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="gradient"
+                bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
+            </tags22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <tags24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </tags24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <tags26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </tags26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <tags28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </tags28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <tags30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </tags30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <tags32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </tags32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <tags34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </tags34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <tags36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="false">
+            </tags36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <tags38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="dark" fullheight="true">
+            </tags38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <tags40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="false">
+            </tags40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <tags42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="light" fullheight="true">
+            </tags42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <tags44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="false">
+            </tags44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <tags46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="false" colorscheme="" fullheight="true">
+            </tags46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <tags48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </tags48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <tags50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </tags50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <tags52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </tags52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <tags54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </tags54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <tags56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </tags56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <tags58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green"
+                toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </tags58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Tags Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><tags58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/tags" tagcolor="green" toppadding="30" bottompadding="30" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </tags58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/.content.xml
index 32d236f17..3127c5cde 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserhorizontal"
-            jcr:description="teaserhorizontal themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserhorizontal"
+          jcr:description="teaserhorizontal themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,117 +12,169 @@
         description="teaserhorizontal themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container14
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container14
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;teaser-horizontal&quot;&gt;Teaser Horizontal&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;teaser-horizontal&quot;&gt;Teaser Horizontal&lt;/h1&gt;
 &lt;p&gt;The Horizontal Teaser component can be used to display a small amount of content with relevant links.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal (Features)&lt;/h2&gt;">
-        </title2><teaserhorizontal3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal">
-        </teaserhorizontal3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles (.hidden)&lt;/h2&gt;">
-        </title4><teaserhorizontal7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"><buttons jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c6></buttons>
-        </teaserhorizontal7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example (Features)&lt;/h2&gt;">
-        </title8><teaserhorizontal11
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"><buttons jcr:primaryType="nt:unstructured"><c9
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c10></buttons>
-        </teaserhorizontal11><title12 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal (Features)&lt;/h2&gt;">
+            </title2>
+            <teaserhorizontal3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal">
+            </teaserhorizontal3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal With All RTE Styles (.hidden)&lt;/h2&gt;">
+            </title4>
+            <teaserhorizontal7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c6>
+                </buttons>
+            </teaserhorizontal7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal - Example (Features)&lt;/h2&gt;">
+            </title8>
+            <teaserhorizontal11
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c9
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c10>
+                </buttons>
+            </teaserhorizontal11>
+            <title12 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical no default values (Empty)&lt;/h2&gt;">
+            </title12>
+            <teaserhorizontal13
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal">
+            </teaserhorizontal13>
+        </container14>
+        <pager15
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical no default values (Empty)&lt;/h2&gt;">
-        </title12><teaserhorizontal13
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal">
-        </teaserhorizontal13>
-        </container14><pager15
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager15>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-blank/.content.xml
index 02f2cc9c8..79c52a3c1 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserhorizontalsample-blank"
-            jcr:description="teaserhorizontalsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserhorizontalsample-blank"
+          jcr:description="teaserhorizontalsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="teaserhorizontalsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaserhorizontal2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </teaserhorizontal2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><teaserhorizontal4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </teaserhorizontal4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><teaserhorizontal6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </teaserhorizontal6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><teaserhorizontal8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </teaserhorizontal8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaserhorizontal10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </teaserhorizontal10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><teaserhorizontal12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </teaserhorizontal12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><teaserhorizontal14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </teaserhorizontal14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><teaserhorizontal16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </teaserhorizontal16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaserhorizontal18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </teaserhorizontal18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><teaserhorizontal20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </teaserhorizontal20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><teaserhorizontal22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </teaserhorizontal22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><teaserhorizontal24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </teaserhorizontal24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaserhorizontal26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </teaserhorizontal26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><teaserhorizontal28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </teaserhorizontal28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><teaserhorizontal30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </teaserhorizontal30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><teaserhorizontal32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </teaserhorizontal32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaserhorizontal34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </teaserhorizontal34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><teaserhorizontal36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="false" colorscheme="dark" fullheight="false">
-        </teaserhorizontal36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><teaserhorizontal38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="false" colorscheme="dark" fullheight="true">
-        </teaserhorizontal38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><teaserhorizontal40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="false" colorscheme="light" fullheight="false">
-        </teaserhorizontal40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaserhorizontal42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="false" colorscheme="light" fullheight="true">
-        </teaserhorizontal42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><teaserhorizontal44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="false" colorscheme="" fullheight="false">
-        </teaserhorizontal44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><teaserhorizontal46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="false" colorscheme="" fullheight="true">
-        </teaserhorizontal46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><teaserhorizontal48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </teaserhorizontal48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaserhorizontal50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </teaserhorizontal50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><teaserhorizontal52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </teaserhorizontal52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><teaserhorizontal54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </teaserhorizontal54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><teaserhorizontal56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </teaserhorizontal56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaserhorizontal2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </teaserhorizontal2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <teaserhorizontal4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </teaserhorizontal4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaserhorizontal6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </teaserhorizontal6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <teaserhorizontal8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </teaserhorizontal8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaserhorizontal10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </teaserhorizontal10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <teaserhorizontal12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </teaserhorizontal12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaserhorizontal14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </teaserhorizontal14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <teaserhorizontal16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </teaserhorizontal16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaserhorizontal18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </teaserhorizontal18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <teaserhorizontal20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </teaserhorizontal20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaserhorizontal22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </teaserhorizontal22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <teaserhorizontal24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </teaserhorizontal24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaserhorizontal26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </teaserhorizontal26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <teaserhorizontal28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </teaserhorizontal28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaserhorizontal30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </teaserhorizontal30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <teaserhorizontal32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </teaserhorizontal32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaserhorizontal34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </teaserhorizontal34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <teaserhorizontal36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </teaserhorizontal36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaserhorizontal38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </teaserhorizontal38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <teaserhorizontal40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </teaserhorizontal40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaserhorizontal42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </teaserhorizontal42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <teaserhorizontal44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="false" colorscheme="" fullheight="false">
+            </teaserhorizontal44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaserhorizontal46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="false" colorscheme="" fullheight="true">
+            </teaserhorizontal46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <teaserhorizontal48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </teaserhorizontal48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaserhorizontal50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </teaserhorizontal50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <teaserhorizontal52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </teaserhorizontal52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaserhorizontal54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </teaserhorizontal54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <teaserhorizontal56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </teaserhorizontal56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaserhorizontal58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </teaserhorizontal58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaserhorizontal58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </teaserhorizontal58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-rte/.content.xml
index eac70bf28..c407821b2 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserhorizontalsample-rte"
-            jcr:description="teaserhorizontalsample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserhorizontalsample-rte"
+          jcr:description="teaserhorizontalsample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,907 @@
         description="teaserhorizontalsample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaserhorizontal4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c3></buttons>
-        </teaserhorizontal4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><teaserhorizontal8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c7></buttons>
-        </teaserhorizontal8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaserhorizontal12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c11></buttons>
-        </teaserhorizontal12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><teaserhorizontal16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c15></buttons>
-        </teaserhorizontal16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaserhorizontal20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c19></buttons>
-        </teaserhorizontal20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><teaserhorizontal24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c23></buttons>
-        </teaserhorizontal24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaserhorizontal28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c27></buttons>
-        </teaserhorizontal28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><teaserhorizontal32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c31></buttons>
-        </teaserhorizontal32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaserhorizontal36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c35></buttons>
-        </teaserhorizontal36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><teaserhorizontal40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c39></buttons>
-        </teaserhorizontal40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaserhorizontal44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c43></buttons>
-        </teaserhorizontal44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><teaserhorizontal48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c47></buttons>
-        </teaserhorizontal48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaserhorizontal52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c51></buttons>
-        </teaserhorizontal52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><teaserhorizontal56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c55></buttons>
-        </teaserhorizontal56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaserhorizontal60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c59></buttons>
-        </teaserhorizontal60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><teaserhorizontal64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c63></buttons>
-        </teaserhorizontal64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><teaserhorizontal68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c67></buttons>
-        </teaserhorizontal68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><teaserhorizontal72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c71></buttons>
-        </teaserhorizontal72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><teaserhorizontal76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c75></buttons>
-        </teaserhorizontal76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><teaserhorizontal80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c79></buttons>
-        </teaserhorizontal80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><teaserhorizontal84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c83></buttons>
-        </teaserhorizontal84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><teaserhorizontal88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c87></buttons>
-        </teaserhorizontal88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><teaserhorizontal92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c91></buttons>
-        </teaserhorizontal92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><teaserhorizontal96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c95></buttons>
-        </teaserhorizontal96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><teaserhorizontal100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c99></buttons>
-        </teaserhorizontal100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><teaserhorizontal104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c103></buttons>
-        </teaserhorizontal104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><teaserhorizontal108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c107></buttons>
-        </teaserhorizontal108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><teaserhorizontal112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c111></buttons>
-        </teaserhorizontal112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaserhorizontal4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c3>
+                </buttons>
+            </teaserhorizontal4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaserhorizontal8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c7>
+                </buttons>
+            </teaserhorizontal8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaserhorizontal12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c11>
+                </buttons>
+            </teaserhorizontal12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaserhorizontal16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c15>
+                </buttons>
+            </teaserhorizontal16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaserhorizontal20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c19>
+                </buttons>
+            </teaserhorizontal20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaserhorizontal24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c23>
+                </buttons>
+            </teaserhorizontal24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaserhorizontal28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c27>
+                </buttons>
+            </teaserhorizontal28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaserhorizontal32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c31>
+                </buttons>
+            </teaserhorizontal32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaserhorizontal36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c35>
+                </buttons>
+            </teaserhorizontal36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaserhorizontal40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c39>
+                </buttons>
+            </teaserhorizontal40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaserhorizontal44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c43>
+                </buttons>
+            </teaserhorizontal44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaserhorizontal48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c47>
+                </buttons>
+            </teaserhorizontal48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaserhorizontal52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c51>
+                </buttons>
+            </teaserhorizontal52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaserhorizontal56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c55>
+                </buttons>
+            </teaserhorizontal56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaserhorizontal60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c59>
+                </buttons>
+            </teaserhorizontal60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <teaserhorizontal64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c63>
+                </buttons>
+            </teaserhorizontal64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <teaserhorizontal68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c67>
+                </buttons>
+            </teaserhorizontal68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <teaserhorizontal72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c71>
+                </buttons>
+            </teaserhorizontal72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <teaserhorizontal76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c75>
+                </buttons>
+            </teaserhorizontal76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <teaserhorizontal80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c79>
+                </buttons>
+            </teaserhorizontal80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <teaserhorizontal84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c83>
+                </buttons>
+            </teaserhorizontal84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <teaserhorizontal88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c87>
+                </buttons>
+            </teaserhorizontal88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <teaserhorizontal92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c91>
+                </buttons>
+            </teaserhorizontal92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <teaserhorizontal96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c95>
+                </buttons>
+            </teaserhorizontal96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <teaserhorizontal100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c99>
+                </buttons>
+            </teaserhorizontal100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <teaserhorizontal104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c103>
+                </buttons>
+            </teaserhorizontal104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <teaserhorizontal108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c107>
+                </buttons>
+            </teaserhorizontal108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <teaserhorizontal112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c111>
+                </buttons>
+            </teaserhorizontal112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <teaserhorizontal116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c115>
+                </buttons>
+            </teaserhorizontal116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><teaserhorizontal116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c115></buttons>
-        </teaserhorizontal116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample/.content.xml
index aeed807a8..93ed590fd 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaserhorizontal/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserhorizontalsample"
-            jcr:description="teaserhorizontalsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserhorizontalsample"
+          jcr:description="teaserhorizontalsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,907 @@
         description="teaserhorizontalsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaserhorizontal4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c3></buttons>
-        </teaserhorizontal4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><teaserhorizontal8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c7></buttons>
-        </teaserhorizontal8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaserhorizontal12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c11></buttons>
-        </teaserhorizontal12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><teaserhorizontal16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c15></buttons>
-        </teaserhorizontal16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaserhorizontal20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c19></buttons>
-        </teaserhorizontal20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><teaserhorizontal24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c23></buttons>
-        </teaserhorizontal24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaserhorizontal28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c27></buttons>
-        </teaserhorizontal28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><teaserhorizontal32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c31></buttons>
-        </teaserhorizontal32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaserhorizontal36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c35></buttons>
-        </teaserhorizontal36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><teaserhorizontal40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c39></buttons>
-        </teaserhorizontal40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaserhorizontal44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c43></buttons>
-        </teaserhorizontal44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><teaserhorizontal48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c47></buttons>
-        </teaserhorizontal48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaserhorizontal52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c51></buttons>
-        </teaserhorizontal52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><teaserhorizontal56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c55></buttons>
-        </teaserhorizontal56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaserhorizontal60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c59></buttons>
-        </teaserhorizontal60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><teaserhorizontal64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c63></buttons>
-        </teaserhorizontal64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><teaserhorizontal68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c67></buttons>
-        </teaserhorizontal68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><teaserhorizontal72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c71></buttons>
-        </teaserhorizontal72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><teaserhorizontal76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c75></buttons>
-        </teaserhorizontal76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><teaserhorizontal80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c79></buttons>
-        </teaserhorizontal80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><teaserhorizontal84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c83></buttons>
-        </teaserhorizontal84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><teaserhorizontal88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c87></buttons>
-        </teaserhorizontal88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><teaserhorizontal92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c91></buttons>
-        </teaserhorizontal92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><teaserhorizontal96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c95></buttons>
-        </teaserhorizontal96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><teaserhorizontal100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c99></buttons>
-        </teaserhorizontal100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><teaserhorizontal104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c103></buttons>
-        </teaserhorizontal104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><teaserhorizontal108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c107></buttons>
-        </teaserhorizontal108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><teaserhorizontal112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c111></buttons>
-        </teaserhorizontal112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaserhorizontal4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c3>
+                </buttons>
+            </teaserhorizontal4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaserhorizontal8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c7>
+                </buttons>
+            </teaserhorizontal8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaserhorizontal12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c11>
+                </buttons>
+            </teaserhorizontal12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaserhorizontal16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c15>
+                </buttons>
+            </teaserhorizontal16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaserhorizontal20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ff80c0" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c19>
+                </buttons>
+            </teaserhorizontal20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaserhorizontal24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c23>
+                </buttons>
+            </teaserhorizontal24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaserhorizontal28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c27>
+                </buttons>
+            </teaserhorizontal28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaserhorizontal32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c31>
+                </buttons>
+            </teaserhorizontal32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaserhorizontal36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c35>
+                </buttons>
+            </teaserhorizontal36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaserhorizontal40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c39>
+                </buttons>
+            </teaserhorizontal40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaserhorizontal44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="gradient" bgcolor="#ff8040" gradient="true"
+                color2="#0080ff" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c43>
+                </buttons>
+            </teaserhorizontal44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaserhorizontal48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c47>
+                </buttons>
+            </teaserhorizontal48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaserhorizontal52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c51>
+                </buttons>
+            </teaserhorizontal52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaserhorizontal56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c55>
+                </buttons>
+            </teaserhorizontal56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaserhorizontal60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c59>
+                </buttons>
+            </teaserhorizontal60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <teaserhorizontal64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c63>
+                </buttons>
+            </teaserhorizontal64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <teaserhorizontal68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="image" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c67>
+                </buttons>
+            </teaserhorizontal68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <teaserhorizontal72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c71>
+                </buttons>
+            </teaserhorizontal72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <teaserhorizontal76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c75>
+                </buttons>
+            </teaserhorizontal76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <teaserhorizontal80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c79>
+                </buttons>
+            </teaserhorizontal80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <teaserhorizontal84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c83>
+                </buttons>
+            </teaserhorizontal84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <teaserhorizontal88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c87>
+                </buttons>
+            </teaserhorizontal88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <teaserhorizontal92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="color" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c91>
+                </buttons>
+            </teaserhorizontal92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <teaserhorizontal96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c95>
+                </buttons>
+            </teaserhorizontal96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <teaserhorizontal100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c99>
+                </buttons>
+            </teaserhorizontal100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <teaserhorizontal104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c103>
+                </buttons>
+            </teaserhorizontal104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <teaserhorizontal108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c107>
+                </buttons>
+            </teaserhorizontal108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <teaserhorizontal112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="false" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c111>
+                </buttons>
+            </teaserhorizontal112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <teaserhorizontal116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal"
+                aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true"
+                fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true"
+                color2="#c0c0c0" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks"
+                buttonsize="default" custombackground="true" bgsize="cover"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c115>
+                </buttons>
+            </teaserhorizontal116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Horizontal - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><teaserhorizontal116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaserhorizontal" aligncontent="left" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" textwidth="60" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" isprimary="false" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c115></buttons>
-        </teaserhorizontal116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/.content.xml
index 4bfbce63d..69e4e6e32 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaservertical"
-            jcr:description="teaservertical themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaservertical"
+          jcr:description="teaservertical themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,145 +12,225 @@
         description="teaservertical themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container22
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container22
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;teaser-vertical&quot;&gt;Teaser Vertical&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;teaser-vertical&quot;&gt;Teaser Vertical&lt;/h1&gt;
 &lt;p&gt;The Vertical Teaser component can be used to display a small amount of content with relevant links.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical (Features)&lt;/h2&gt;">
-        </title2><teaservertical3
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical">
-        </teaservertical3><title4 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media (Features)&lt;/h2&gt;">
-        </title4><teaservertical7
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after"><buttons jcr:primaryType="nt:unstructured"><c5
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c5><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c6></buttons>
-        </teaservertical7><title8 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles (.hidden)&lt;/h2&gt;">
-        </title8><teaservertical11
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"><buttons jcr:primaryType="nt:unstructured"><c9
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c9><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c10></buttons>
-        </teaservertical11><title12 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height (Features)&lt;/h2&gt;">
-        </title12><teaservertical15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"><buttons jcr:primaryType="nt:unstructured"><c13
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c14></buttons>
-        </teaservertical15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example (Features)&lt;/h2&gt;">
-        </title16><teaservertical19
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"><buttons jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c18></buttons>
-        </teaservertical19><title20 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical (Features)&lt;/h2&gt;">
+            </title2>
+            <teaservertical3
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical">
+            </teaservertical3>
+            <title4 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Media (Features)&lt;/h2&gt;">
+            </title4>
+            <teaservertical7
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c5
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c5>
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c6>
+                </buttons>
+            </teaservertical7>
+            <title8 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical With All RTE Styles (.hidden)&lt;/h2&gt;">
+            </title8>
+            <teaservertical11
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c9
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c9>
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c10>
+                </buttons>
+            </teaservertical11>
+            <title12 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height (Features)&lt;/h2&gt;">
+            </title12>
+            <teaservertical15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c13
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c14>
+                </buttons>
+            </teaservertical15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example (Features)&lt;/h2&gt;">
+            </title16>
+            <teaservertical19
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c18>
+                </buttons>
+            </teaservertical19>
+            <title20 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical (Empty)&lt;/h2&gt;">
+            </title20>
+            <teaservertical21
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical">
+            </teaservertical21>
+        </container22>
+        <pager23
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical (Empty)&lt;/h2&gt;">
-        </title20><teaservertical21
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical">
-        </teaservertical21>
-        </container22><pager23
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager23>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-blank/.content.xml
index da95a1c1f..2f94cb68b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserverticalsample-blank"
-            jcr:description="teaserverticalsample-blank themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserverticalsample-blank"
+          jcr:description="teaserverticalsample-blank themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,346 +12,483 @@
         description="teaserverticalsample-blank themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container59
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaservertical2
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true">
-        </teaservertical2><title3 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title3><teaservertical4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false">
-        </teaservertical4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title5><teaservertical6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true">
-        </teaservertical6><title7 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title7><teaservertical8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false">
-        </teaservertical8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaservertical10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true">
-        </teaservertical10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title11><teaservertical12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false">
-        </teaservertical12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title13><teaservertical14
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true">
-        </teaservertical14><title15 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title15><teaservertical16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false">
-        </teaservertical16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaservertical18
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true">
-        </teaservertical18><title19 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title19><teaservertical20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false">
-        </teaservertical20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><teaservertical22
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true">
-        </teaservertical22><title23 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title23><teaservertical24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false">
-        </teaservertical24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaservertical26
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true">
-        </teaservertical26><title27 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title27><teaservertical28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false">
-        </teaservertical28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title29><teaservertical30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true">
-        </teaservertical30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title31><teaservertical32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false">
-        </teaservertical32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaservertical34
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true">
-        </teaservertical34><title35 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title35><teaservertical36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="false" colorscheme="dark" fullheight="false">
-        </teaservertical36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title37><teaservertical38
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="false" colorscheme="dark" fullheight="true">
-        </teaservertical38><title39 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title39><teaservertical40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="false" colorscheme="light" fullheight="false">
-        </teaservertical40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaservertical42
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="false" colorscheme="light" fullheight="true">
-        </teaservertical42><title43 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title43><teaservertical44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="false" colorscheme="" fullheight="false">
-        </teaservertical44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title45><teaservertical46
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="false" colorscheme="" fullheight="true">
-        </teaservertical46><title47 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title47><teaservertical48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
-        </teaservertical48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaservertical50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
-        </teaservertical50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title51><teaservertical52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
-        </teaservertical52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title53><teaservertical54
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
-        </teaservertical54><title55 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title55><teaservertical56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
-        </teaservertical56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container59
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaservertical2
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+            </teaservertical2>
+            <title3 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title3>
+            <teaservertical4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+            </teaservertical4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaservertical6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+            </teaservertical6>
+            <title7 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title7>
+            <teaservertical8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+            </teaservertical8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaservertical10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+            </teaservertical10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title11>
+            <teaservertical12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+            </teaservertical12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaservertical14
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+            </teaservertical14>
+            <title15 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title15>
+            <teaservertical16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+            </teaservertical16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaservertical18
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+            </teaservertical18>
+            <title19 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title19>
+            <teaservertical20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+            </teaservertical20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaservertical22
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+            </teaservertical22>
+            <title23 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title23>
+            <teaservertical24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+            </teaservertical24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaservertical26
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+            </teaservertical26>
+            <title27 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title27>
+            <teaservertical28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+            </teaservertical28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaservertical30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+            </teaservertical30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title31>
+            <teaservertical32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+            </teaservertical32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaservertical34
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+            </teaservertical34>
+            <title35 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title35>
+            <teaservertical36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="false" colorscheme="dark" fullheight="false">
+            </teaservertical36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaservertical38
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="false" colorscheme="dark" fullheight="true">
+            </teaservertical38>
+            <title39 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title39>
+            <teaservertical40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="false" colorscheme="light" fullheight="false">
+            </teaservertical40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaservertical42
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="false" colorscheme="light" fullheight="true">
+            </teaservertical42>
+            <title43 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title43>
+            <teaservertical44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="false" colorscheme="" fullheight="false">
+            </teaservertical44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaservertical46
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="false" colorscheme="" fullheight="true">
+            </teaservertical46>
+            <title47 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title47>
+            <teaservertical48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+            </teaservertical48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaservertical50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+            </teaservertical50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title51>
+            <teaservertical52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+            </teaservertical52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaservertical54
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+            </teaservertical54>
+            <title55 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title55>
+            <teaservertical56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+            </teaservertical56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaservertical58
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+            </teaservertical58>
+        </container59>
+        <pager60
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaservertical58
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
-        </teaservertical58>
-        </container59><pager60
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager60>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-mediateaser/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-mediateaser/.content.xml
index 2b8e08eda..7ae4286a6 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-mediateaser/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-mediateaser/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserverticalsample-mediateaser"
-            jcr:description="teaserverticalsample-mediateaser themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserverticalsample-mediateaser"
+          jcr:description="teaserverticalsample-mediateaser themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,988 @@
         description="teaserverticalsample-mediateaser themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaservertical4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c3></buttons>
-        </teaservertical4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><teaservertical8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c7></buttons>
-        </teaservertical8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaservertical12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c11></buttons>
-        </teaservertical12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><teaservertical16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c15></buttons>
-        </teaservertical16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaservertical20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c19></buttons>
-        </teaservertical20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><teaservertical24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c23></buttons>
-        </teaservertical24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaservertical28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c27></buttons>
-        </teaservertical28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><teaservertical32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c31></buttons>
-        </teaservertical32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaservertical36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c35></buttons>
-        </teaservertical36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><teaservertical40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c39></buttons>
-        </teaservertical40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaservertical44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c43></buttons>
-        </teaservertical44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><teaservertical48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c47></buttons>
-        </teaservertical48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaservertical52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c51></buttons>
-        </teaservertical52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><teaservertical56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c55></buttons>
-        </teaservertical56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaservertical60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c59></buttons>
-        </teaservertical60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><teaservertical64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c63></buttons>
-        </teaservertical64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><teaservertical68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c67></buttons>
-        </teaservertical68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><teaservertical72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c71></buttons>
-        </teaservertical72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><teaservertical76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c75></buttons>
-        </teaservertical76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><teaservertical80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c79></buttons>
-        </teaservertical80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><teaservertical84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c83></buttons>
-        </teaservertical84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><teaservertical88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c87></buttons>
-        </teaservertical88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><teaservertical92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c91></buttons>
-        </teaservertical92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><teaservertical96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c95></buttons>
-        </teaservertical96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><teaservertical100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c99></buttons>
-        </teaservertical100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><teaservertical104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c103></buttons>
-        </teaservertical104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><teaservertical108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c107></buttons>
-        </teaservertical108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><teaservertical112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c111></buttons>
-        </teaservertical112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaservertical4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c3>
+                </buttons>
+            </teaservertical4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaservertical8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c7>
+                </buttons>
+            </teaservertical8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaservertical12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c11>
+                </buttons>
+            </teaservertical12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaservertical16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c15>
+                </buttons>
+            </teaservertical16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaservertical20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c19>
+                </buttons>
+            </teaservertical20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaservertical24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c23>
+                </buttons>
+            </teaservertical24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaservertical28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c27>
+                </buttons>
+            </teaservertical28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaservertical32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c31>
+                </buttons>
+            </teaservertical32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaservertical36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c35>
+                </buttons>
+            </teaservertical36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaservertical40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c39>
+                </buttons>
+            </teaservertical40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaservertical44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c43>
+                </buttons>
+            </teaservertical44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaservertical48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c47>
+                </buttons>
+            </teaservertical48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaservertical52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c51>
+                </buttons>
+            </teaservertical52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaservertical56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c55>
+                </buttons>
+            </teaservertical56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaservertical60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c59>
+                </buttons>
+            </teaservertical60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <teaservertical64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c63>
+                </buttons>
+            </teaservertical64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <teaservertical68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c67>
+                </buttons>
+            </teaservertical68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <teaservertical72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c71>
+                </buttons>
+            </teaservertical72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <teaservertical76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c75>
+                </buttons>
+            </teaservertical76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <teaservertical80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c79>
+                </buttons>
+            </teaservertical80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <teaservertical84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c83>
+                </buttons>
+            </teaservertical84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <teaservertical88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c87>
+                </buttons>
+            </teaservertical88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <teaservertical92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="false"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c91>
+                </buttons>
+            </teaservertical92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <teaservertical96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c95>
+                </buttons>
+            </teaservertical96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <teaservertical100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c99>
+                </buttons>
+            </teaservertical100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <teaservertical104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c103>
+                </buttons>
+            </teaservertical104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <teaservertical108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c107>
+                </buttons>
+            </teaservertical108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <teaservertical112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c111>
+                </buttons>
+            </teaservertical112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <teaservertical116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                showmedia="true" mediatype="image"
+                imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c115>
+                </buttons>
+            </teaservertical116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Media Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><teaservertical116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" showmedia="true" mediatype="image" imagesrc="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" mediatitle="Bird's eye view of the beach" mediawidth="50" mediaposition="after" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c115></buttons>
-        </teaservertical116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-rte/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-rte/.content.xml
index 64116bbdc..09226cc26 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-rte/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-rte/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserverticalsample-rte"
-            jcr:description="teaserverticalsample-rte themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserverticalsample-rte"
+          jcr:description="teaserverticalsample-rte themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,907 @@
         description="teaserverticalsample-rte themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaservertical4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c3></buttons>
-        </teaservertical4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><teaservertical8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c7></buttons>
-        </teaservertical8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaservertical12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c11></buttons>
-        </teaservertical12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><teaservertical16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c15></buttons>
-        </teaservertical16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaservertical20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c19></buttons>
-        </teaservertical20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><teaservertical24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c23></buttons>
-        </teaservertical24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaservertical28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c27></buttons>
-        </teaservertical28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><teaservertical32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c31></buttons>
-        </teaservertical32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaservertical36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c35></buttons>
-        </teaservertical36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><teaservertical40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c39></buttons>
-        </teaservertical40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaservertical44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c43></buttons>
-        </teaservertical44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><teaservertical48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c47></buttons>
-        </teaservertical48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaservertical52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c51></buttons>
-        </teaservertical52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><teaservertical56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c55></buttons>
-        </teaservertical56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaservertical60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c59></buttons>
-        </teaservertical60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><teaservertical64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c63></buttons>
-        </teaservertical64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><teaservertical68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c67></buttons>
-        </teaservertical68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><teaservertical72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c71></buttons>
-        </teaservertical72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><teaservertical76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c75></buttons>
-        </teaservertical76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><teaservertical80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c79></buttons>
-        </teaservertical80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><teaservertical84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c83></buttons>
-        </teaservertical84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><teaservertical88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c87></buttons>
-        </teaservertical88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><teaservertical92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c91></buttons>
-        </teaservertical92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><teaservertical96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c95></buttons>
-        </teaservertical96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><teaservertical100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c99></buttons>
-        </teaservertical100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><teaservertical104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c103></buttons>
-        </teaservertical104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><teaservertical108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c107></buttons>
-        </teaservertical108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><teaservertical112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c111></buttons>
-        </teaservertical112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaservertical4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c3>
+                </buttons>
+            </teaservertical4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaservertical8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c7>
+                </buttons>
+            </teaservertical8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaservertical12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c11>
+                </buttons>
+            </teaservertical12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaservertical16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c15>
+                </buttons>
+            </teaservertical16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaservertical20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c19>
+                </buttons>
+            </teaservertical20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaservertical24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c23>
+                </buttons>
+            </teaservertical24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaservertical28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c27>
+                </buttons>
+            </teaservertical28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaservertical32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c31>
+                </buttons>
+            </teaservertical32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaservertical36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c35>
+                </buttons>
+            </teaservertical36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaservertical40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c39>
+                </buttons>
+            </teaservertical40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaservertical44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c43>
+                </buttons>
+            </teaservertical44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaservertical48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c47>
+                </buttons>
+            </teaservertical48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaservertical52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c51>
+                </buttons>
+            </teaservertical52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaservertical56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c55>
+                </buttons>
+            </teaservertical56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaservertical60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c59>
+                </buttons>
+            </teaservertical60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <teaservertical64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c63>
+                </buttons>
+            </teaservertical64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <teaservertical68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c67>
+                </buttons>
+            </teaservertical68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <teaservertical72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c71>
+                </buttons>
+            </teaservertical72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <teaservertical76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c75>
+                </buttons>
+            </teaservertical76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <teaservertical80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c79>
+                </buttons>
+            </teaservertical80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <teaservertical84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c83>
+                </buttons>
+            </teaservertical84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <teaservertical88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c87>
+                </buttons>
+            </teaservertical88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <teaservertical92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c91>
+                </buttons>
+            </teaservertical92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <teaservertical96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c95>
+                </buttons>
+            </teaservertical96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <teaservertical100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c99>
+                </buttons>
+            </teaservertical100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <teaservertical104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c103>
+                </buttons>
+            </teaservertical104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <teaservertical108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c107>
+                </buttons>
+            </teaservertical108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <teaservertical112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c111>
+                </buttons>
+            </teaservertical112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <teaservertical116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c115>
+                </buttons>
+            </teaservertical116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical With All RTE Styles Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><teaservertical116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;h1&gt;Left (Default) Alignment Test&lt;/h1&gt;&lt;h2&gt;Header h2&lt;/h2&gt;&lt;h3&gt;Header h3&lt;/h3&gt;&lt;h4&gt;Header h4&lt;/h4&gt;&lt;p&gt;Text:&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li&gt;item 1&lt;/li&gt;&lt;li&gt;item 2&lt;/li&gt;&lt;li&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: center; &quot;&gt;Center Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: center; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: center; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: center; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: center; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: center; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: center; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: center; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: right; &quot;&gt;Right Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: right; &quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: right; &quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: right; &quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: right; &quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: right; &quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: right; &quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: right; &quot;&gt;another line&lt;/p&gt;&lt;h1 style=&quot;text-align: justify;&quot;&gt;Justified Alignment Test&lt;/h1&gt;&lt;h2 style=&quot;text-align: justify;&quot;&gt;Header h2&lt;/h2&gt;&lt;h3 style=&quot;text-align: justify;&quot;&gt;Header h3&lt;/h3&gt;&lt;h4 style=&quot;text-align: justify;&quot;&gt;Header h4&lt;/h4&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Text:&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare felis at ligula suscipit, eu condimentum tortor venenatis. Maecenas laoreet blandit tempor. Praesent fermentum malesuada ante eget condimentum. Nulla feugiat, tortor vel consectetur mollis, neque mauris lacinia nisi, id tristique sapien eros sed neque. Integer nec nunc nec elit condimentum faucibus a sit amet dolor. Aliquam nec metus urna. Donec id urna lacus. Nam luctus efficitur leo, at lobortis eros. Phasellus ut tincidunt orci, vitae lacinia lacus.&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;unordered list:&lt;/p&gt;&lt;ul&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;ordered list&lt;/p&gt;&lt;ol&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 1&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 2&lt;/li&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;item 3&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;sub&lt;sub&gt;script&lt;/sub&gt; super&lt;sup&gt;script&lt;/sup&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;strong&gt;bold&lt;/strong&gt; &lt;em&gt;italic&lt;/em&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;a href=&quot;https://www.example.com&quot; title=&quot;example.com&quot;&gt;some link text&lt;/a&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;a line followed by a shift return (&amp;lt;br/&amp;gt;) &lt;br&gt;a line followed by a return (end of paragraph)&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;another line&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c115></buttons>
-        </teaservertical116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-teaserfull/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-teaserfull/.content.xml
index 0bcb0c868..8b96a2958 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-teaserfull/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample-teaserfull/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserverticalsample-teaserfull"
-            jcr:description="teaserverticalsample-teaserfull themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserverticalsample-teaserfull"
+          jcr:description="teaserverticalsample-teaserfull themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,918 @@
         description="teaserverticalsample-teaserfull themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaservertical4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff80c0" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c3></buttons>
-        </teaservertical4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><teaservertical8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff80c0" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c7></buttons>
-        </teaservertical8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaservertical12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff80c0" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c11></buttons>
-        </teaservertical12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><teaservertical16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff80c0" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c15></buttons>
-        </teaservertical16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaservertical20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="color" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff80c0" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c19></buttons>
-        </teaservertical20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><teaservertical24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c23></buttons>
-        </teaservertical24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaservertical28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c27></buttons>
-        </teaservertical28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><teaservertical32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c31></buttons>
-        </teaservertical32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaservertical36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c35></buttons>
-        </teaservertical36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><teaservertical40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c39></buttons>
-        </teaservertical40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaservertical44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="gradient" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c43></buttons>
-        </teaservertical44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><teaservertical48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c47></buttons>
-        </teaservertical48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaservertical52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c51></buttons>
-        </teaservertical52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><teaservertical56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c55></buttons>
-        </teaservertical56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaservertical60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c59></buttons>
-        </teaservertical60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><teaservertical64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c63></buttons>
-        </teaservertical64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><teaservertical68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c67></buttons>
-        </teaservertical68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><teaservertical72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c71></buttons>
-        </teaservertical72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><teaservertical76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c75></buttons>
-        </teaservertical76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><teaservertical80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c79></buttons>
-        </teaservertical80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><teaservertical84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c83></buttons>
-        </teaservertical84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><teaservertical88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c87></buttons>
-        </teaservertical88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><teaservertical92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="false" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c91></buttons>
-        </teaservertical92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><teaservertical96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c95></buttons>
-        </teaservertical96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><teaservertical100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c99></buttons>
-        </teaservertical100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><teaservertical104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c103></buttons>
-        </teaservertical104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><teaservertical108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c107></buttons>
-        </teaservertical108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><teaservertical112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c111></buttons>
-        </teaservertical112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaservertical4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c3>
+                </buttons>
+            </teaservertical4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaservertical8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c7>
+                </buttons>
+            </teaservertical8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaservertical12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c11>
+                </buttons>
+            </teaservertical12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaservertical16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c15>
+                </buttons>
+            </teaservertical16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaservertical20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="color"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff80c0" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c19>
+                </buttons>
+            </teaservertical20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaservertical24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c23>
+                </buttons>
+            </teaservertical24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaservertical28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c27>
+                </buttons>
+            </teaservertical28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaservertical32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c31>
+                </buttons>
+            </teaservertical32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaservertical36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c35>
+                </buttons>
+            </teaservertical36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaservertical40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c39>
+                </buttons>
+            </teaservertical40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaservertical44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="gradient"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgcolor="#ff8040" color2="#0080ff" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c43>
+                </buttons>
+            </teaservertical44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaservertical48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c47>
+                </buttons>
+            </teaservertical48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaservertical52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c51>
+                </buttons>
+            </teaservertical52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaservertical56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c55>
+                </buttons>
+            </teaservertical56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaservertical60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c59>
+                </buttons>
+            </teaservertical60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <teaservertical64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c63>
+                </buttons>
+            </teaservertical64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <teaservertical68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c67>
+                </buttons>
+            </teaservertical68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <teaservertical72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c71>
+                </buttons>
+            </teaservertical72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <teaservertical76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c75>
+                </buttons>
+            </teaservertical76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <teaservertical80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c79>
+                </buttons>
+            </teaservertical80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <teaservertical84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c83>
+                </buttons>
+            </teaservertical84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <teaservertical88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c87>
+                </buttons>
+            </teaservertical88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <teaservertical92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="false" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c91>
+                </buttons>
+            </teaservertical92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <teaservertical96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c95>
+                </buttons>
+            </teaservertical96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <teaservertical100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c99>
+                </buttons>
+            </teaservertical100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <teaservertical104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c103>
+                </buttons>
+            </teaservertical104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <teaservertical108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c107>
+                </buttons>
+            </teaservertical108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <teaservertical112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="false"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c111>
+                </buttons>
+            </teaservertical112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <teaservertical116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true"
+                custombackground="true" backgroundtype="video"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks"
+                bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c115>
+                </buttons>
+            </teaservertical116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Full Height Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><teaservertical116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showbutton="true" isprimary="true" fullheight="true" custombackground="true" backgroundtype="video" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" overlay="true" overlaycolor="#ffffff" overlayopacity="70" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" buttonsize="large" title="Themeclean Flex Blocks" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c115></buttons>
-        </teaservertical116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample/.content.xml
index 870f596ff..050ae195d 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/teaservertical/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | teaserverticalsample"
-            jcr:description="teaserverticalsample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | teaserverticalsample"
+          jcr:description="teaserverticalsample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,462 +12,907 @@
         description="teaserverticalsample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container117
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><teaservertical4
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c3></buttons>
-        </teaservertical4><title5 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title5><teaservertical8
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c6
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c6><c7
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c7></buttons>
-        </teaservertical8><title9 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title9><teaservertical12
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c10
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c10><c11
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c11></buttons>
-        </teaservertical12><title13 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title13><teaservertical16
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c14
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c14><c15
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c15></buttons>
-        </teaservertical16><title17 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title17><teaservertical20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c18
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c19></buttons>
-        </teaservertical20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title21><teaservertical24
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c23></buttons>
-        </teaservertical24><title25 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title25><teaservertical28
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c26
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c26><c27
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c27></buttons>
-        </teaservertical28><title29 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title29><teaservertical32
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c30
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c30><c31
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c31></buttons>
-        </teaservertical32><title33 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title33><teaservertical36
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c34
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c34><c35
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c35></buttons>
-        </teaservertical36><title37 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title37><teaservertical40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c38
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c39></buttons>
-        </teaservertical40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><teaservertical44
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c43></buttons>
-        </teaservertical44><title45 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title45><teaservertical48
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c46
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c46><c47
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c47></buttons>
-        </teaservertical48><title49 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title49><teaservertical52
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c50
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c50><c51
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c51></buttons>
-        </teaservertical52><title53 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title53><teaservertical56
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c54
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c54><c55
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c55></buttons>
-        </teaservertical56><title57 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title57><teaservertical60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c58
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c59></buttons>
-        </teaservertical60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title61><teaservertical64
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c63></buttons>
-        </teaservertical64><title65 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title65><teaservertical68
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c66
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c66><c67
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c67></buttons>
-        </teaservertical68><title69 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title69><teaservertical72
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c70
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c70><c71
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c71></buttons>
-        </teaservertical72><title73 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title73><teaservertical76
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c74
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c74><c75
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c75></buttons>
-        </teaservertical76><title77 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title77><teaservertical80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c78
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c79></buttons>
-        </teaservertical80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><teaservertical84
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c83></buttons>
-        </teaservertical84><title85 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title85><teaservertical88
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c86
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c86><c87
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c87></buttons>
-        </teaservertical88><title89 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title89><teaservertical92
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="false" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c90
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c90><c91
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c91></buttons>
-        </teaservertical92><title93 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title93><teaservertical96
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c94
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c94><c95
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c95></buttons>
-        </teaservertical96><title97 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title97><teaservertical100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark"><buttons jcr:primaryType="nt:unstructured"><c98
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c99></buttons>
-        </teaservertical100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title101><teaservertical104
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c103></buttons>
-        </teaservertical104><title105 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title105><teaservertical108
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light"><buttons jcr:primaryType="nt:unstructured"><c106
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c106><c107
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c107></buttons>
-        </teaservertical108><title109 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title109><teaservertical112
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c110
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c110><c111
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c111></buttons>
-        </teaservertical112><title113 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container117
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <teaservertical4
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c3>
+                </buttons>
+            </teaservertical4>
+            <title5 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title5>
+            <teaservertical8
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c6
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c6>
+                    <c7
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c7>
+                </buttons>
+            </teaservertical8>
+            <title9 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title9>
+            <teaservertical12
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c10
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c10>
+                    <c11
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c11>
+                </buttons>
+            </teaservertical12>
+            <title13 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title13>
+            <teaservertical16
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c14
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c14>
+                    <c15
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c15>
+                </buttons>
+            </teaservertical16>
+            <title17 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title17>
+            <teaservertical20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="color" bgcolor="#ff80c0" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c18
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c19>
+                </buttons>
+            </teaservertical20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title21>
+            <teaservertical24
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c23>
+                </buttons>
+            </teaservertical24>
+            <title25 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title25>
+            <teaservertical28
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c26
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c26>
+                    <c27
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c27>
+                </buttons>
+            </teaservertical28>
+            <title29 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title29>
+            <teaservertical32
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c30
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c30>
+                    <c31
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c31>
+                </buttons>
+            </teaservertical32>
+            <title33 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title33>
+            <teaservertical36
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c34
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c34>
+                    <c35
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c35>
+                </buttons>
+            </teaservertical36>
+            <title37 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title37>
+            <teaservertical40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c38
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c39>
+                </buttons>
+            </teaservertical40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <teaservertical44
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ff8040" gradient="true" color2="#0080ff" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c43>
+                </buttons>
+            </teaservertical44>
+            <title45 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title45>
+            <teaservertical48
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c46
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c46>
+                    <c47
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c47>
+                </buttons>
+            </teaservertical48>
+            <title49 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title49>
+            <teaservertical52
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c50
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c50>
+                    <c51
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c51>
+                </buttons>
+            </teaservertical52>
+            <title53 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title53>
+            <teaservertical56
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c54
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c54>
+                    <c55
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c55>
+                </buttons>
+            </teaservertical56>
+            <title57 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title57>
+            <teaservertical60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c58
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c59>
+                </buttons>
+            </teaservertical60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title61>
+            <teaservertical64
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c63>
+                </buttons>
+            </teaservertical64>
+            <title65 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title65>
+            <teaservertical68
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="image" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c66
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c66>
+                    <c67
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c67>
+                </buttons>
+            </teaservertical68>
+            <title69 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title69>
+            <teaservertical72
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c70
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c70>
+                    <c71
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c71>
+                </buttons>
+            </teaservertical72>
+            <title73 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title73>
+            <teaservertical76
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c74
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c74>
+                    <c75
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c75>
+                </buttons>
+            </teaservertical76>
+            <title77 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title77>
+            <teaservertical80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c78
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c79>
+                </buttons>
+            </teaservertical80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <teaservertical84
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c83>
+                </buttons>
+            </teaservertical84>
+            <title85 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title85>
+            <teaservertical88
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c86
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c86>
+                    <c87
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c87>
+                </buttons>
+            </teaservertical88>
+            <title89 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title89>
+            <teaservertical92
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="gradient" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="false" colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c90
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c90>
+                    <c91
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c91>
+                </buttons>
+            </teaservertical92>
+            <title93 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title93>
+            <teaservertical96
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c94
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c94>
+                    <c95
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c95>
+                </buttons>
+            </teaservertical96>
+            <title97 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title97>
+            <teaservertical100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="dark">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c98
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c99>
+                </buttons>
+            </teaservertical100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title101>
+            <teaservertical104
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c103>
+                </buttons>
+            </teaservertical104>
+            <title105 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title105>
+            <teaservertical108
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="light">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c106
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c106>
+                    <c107
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c107>
+                </buttons>
+            </teaservertical108>
+            <title109 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title109>
+            <teaservertical112
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="false"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c110
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c110>
+                    <c111
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c111>
+                </buttons>
+            </teaservertical112>
+            <title113 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title113>
+            <teaservertical116
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical"
+                showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true"
+                backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30"
+                toppadding="30"
+                text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;"
+                subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default"
+                custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM"
+                colorscheme="">
+                <buttons jcr:primaryType="nt:unstructured">
+                    <c114
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="See More" buttoncolor="primary" iconclass="">
+                    </c114>
+                    <c115
+                        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages"
+                        buttontext="About Us" buttoncolor="primary" iconclass="">
+                    </c115>
+                </buttons>
+            </teaservertical116>
+        </container117>
+        <pager118
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Teaser Vertical - Example Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title113><teaservertical116
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/teaservertical" showtitle="true" showsubtitle="true" showtext="true" showbutton="true" fullheight="true" backgroundtype="video" bgcolor="#ffffff" gradient="true" color2="#c0c0c0" bottompadding="30" toppadding="30" text="&lt;p&gt;Eligendi fugit asperiores et. Corrupti voluptatum quasi sit. Adipisci ut voluptatem necessitatibus cumque aspernatur.&lt;/p&gt;" subtitle="Molestiae alias et inventore voluptas" title="Peregrine blocks" buttonsize="default" custombackground="true" bgsize="cover" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme=""><buttons jcr:primaryType="nt:unstructured"><c114
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="See More" buttoncolor="primary" iconclass="">
-        </c114><c115
-        jcr:primaryType="nt:unstructured" buttonlink="/content/themecleanflex/pages" buttontext="About Us" buttoncolor="primary" iconclass="">
-        </c115></buttons>
-        </teaservertical116>
-        </container117><pager118
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager118>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/.content.xml
index 180fdd41c..8f356a1ef 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | textlinks"
-            jcr:description="textlinks themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | textlinks"
+          jcr:description="textlinks themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,85 +12,115 @@
         description="textlinks themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container7
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
+            backgroundtype="color"
+            bgcolor="#eeeeee"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container7
             jcr:primaryType="nt:unstructured"
             sling:resourceType="themecleanflex/components/container"
             htmlelement="main">
-            
-        <intro1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            bottompadding="25"
-            toppadding="25"
-            htmlelement="banner"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h1 id=&quot;text-links&quot;&gt;Text Links&lt;/h1&gt;
+
+            <intro1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    bottompadding="25"
+                    toppadding="25"
+                    htmlelement="banner"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h1 id=&quot;text-links&quot;&gt;Text Links&lt;/h1&gt;
 &lt;p&gt;The Text Links components contains a collection of simple Links for use in the Header.&lt;/p&gt;
 ">
-        </intro1>
-        <title2 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            </intro1>
+            <title2 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Links (.hidden)&lt;/h2&gt;">
+            </title2>
+            <textlinks6
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks">
+                <links jcr:primaryType="nt:unstructured">
+                    <c3
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c4>
+                    <c5
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c5>
+                </links>
+            </textlinks6>
+        </container7>
+        <pager8
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links (.hidden)&lt;/h2&gt;">
-        </title2><textlinks6
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"><links jcr:primaryType="nt:unstructured"><c3
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c5></links>
-        </textlinks6>
-        </container7><pager8
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager8>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/sample/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/sample/.content.xml
index 70dd84e05..4738759e7 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/sample/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/library/textlinks/sample/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-            jcr:primaryType="per:Page"
-            jcr:title="tf-cl | textlinkssample"
-            jcr:description="textlinkssample themecleanflex component library"
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+          jcr:primaryType="per:Page"
+          jcr:title="tf-cl | textlinkssample"
+          jcr:description="textlinkssample themecleanflex component library"
 >
     <jcr:content
         jcr:primaryType="per:PageContent"
@@ -11,520 +12,889 @@
         description="textlinkssample themecleanflex component library"
         brand="themecleanflex"
         template="/content/themecleanflex/templates"
-            ><clheader
-            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header" backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo" logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default"><elevation jcr:primaryType="nt:unstructured"></elevation>
-    <links jcr:primaryType="nt:unstructured"></links>
-    <buttons jcr:primaryType="nt:unstructured"></buttons>
-            </clheader><clbreadcrumb
-        colorscheme="light"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2"><toppadding jcr:primaryType="nt:unstructured"></toppadding>
-        <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
-        </clbreadcrumb><pager0
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
-        </pager0><container146
-            jcr:primaryType="nt:unstructured"
-            sling:resourceType="themecleanflex/components/container"
-            htmlelement="main">
-            [object Object]<title1 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title1><textlinks5
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark" fullheight="true"><links jcr:primaryType="nt:unstructured"><c2
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c2><c3
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c4></links>
-        </textlinks5><title6 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title6><textlinks10
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="false"><links jcr:primaryType="nt:unstructured"><c7
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c7><c8
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c8><c9
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c9></links>
-        </textlinks10><title11 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title11><textlinks15
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light" fullheight="true"><links jcr:primaryType="nt:unstructured"><c12
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c12><c13
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c13><c14
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c14></links>
-        </textlinks15><title16 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title16><textlinks20
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="false"><links jcr:primaryType="nt:unstructured"><c17
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c17><c18
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c18><c19
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c19></links>
-        </textlinks20><title21 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title21><textlinks25
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="" fullheight="true"><links jcr:primaryType="nt:unstructured"><c22
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c22><c23
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c23><c24
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c24></links>
-        </textlinks25><title26 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title26><textlinks30
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="false"><links jcr:primaryType="nt:unstructured"><c27
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c27><c28
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c28><c29
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c29></links>
-        </textlinks30><title31 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title31><textlinks35
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="dark" fullheight="true"><links jcr:primaryType="nt:unstructured"><c32
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c32><c33
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c33><c34
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c34></links>
-        </textlinks35><title36 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title36><textlinks40
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="false"><links jcr:primaryType="nt:unstructured"><c37
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c37><c38
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c38><c39
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c39></links>
-        </textlinks40><title41 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title41><textlinks45
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="light" fullheight="true"><links jcr:primaryType="nt:unstructured"><c42
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c42><c43
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c43><c44
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c44></links>
-        </textlinks45><title46 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title46><textlinks50
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="false"><links jcr:primaryType="nt:unstructured"><c47
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c47><c48
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c48><c49
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c49></links>
-        </textlinks50><title51 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title51><textlinks55
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff" colorscheme="" fullheight="true"><links jcr:primaryType="nt:unstructured"><c52
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c52><c53
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c53><c54
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c54></links>
-        </textlinks55><title56 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title56><textlinks60
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="false"><links jcr:primaryType="nt:unstructured"><c57
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c57><c58
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c58><c59
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c59></links>
-        </textlinks60><title61 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title61><textlinks65
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="dark" fullheight="true"><links jcr:primaryType="nt:unstructured"><c62
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c62><c63
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c63><c64
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c64></links>
-        </textlinks65><title66 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+    >
+        <clheader
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/header" htmlelement="header"
+            backgroundtype="color" bgcolor="#eeeeee" colorscheme="light" toppadding="10" bottompadding="10"
+            bgvideo="https://www.youtube.com/embed/Ju86mknumYM" collapsed="false"
+            logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logoalttext="Peregrine CMS Logo"
+            logourl="/content/themecleanflex/pages/library.html" logosize="60" buttonsize="default">
+            <elevation jcr:primaryType="nt:unstructured"></elevation>
+            <links jcr:primaryType="nt:unstructured"></links>
+            <buttons jcr:primaryType="nt:unstructured"></buttons>
+        </clheader>
+        <clbreadcrumb
+            colorscheme="light"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title66><textlinks70
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="false"><links jcr:primaryType="nt:unstructured"><c67
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c67><c68
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c68><c69
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c69></links>
-        </textlinks70><title71 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/breadcrumb" level="2">
+            <toppadding jcr:primaryType="nt:unstructured"></toppadding>
+            <bottompadding jcr:primaryType="nt:unstructured"></bottompadding>
+        </clbreadcrumb>
+        <pager0
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title71><textlinks75
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="light" fullheight="true"><links jcr:primaryType="nt:unstructured"><c72
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c72><c73
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c73><c74
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c74></links>
-        </textlinks75><title76 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title76><textlinks80
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="false"><links jcr:primaryType="nt:unstructured"><c77
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c77><c78
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c78><c79
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c79></links>
-        </textlinks80><title81 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title81><textlinks85
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="image" bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg" colorscheme="" fullheight="true"><links jcr:primaryType="nt:unstructured"><c82
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c82><c83
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c83><c84
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c84></links>
-        </textlinks85><title86 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title86><textlinks90
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="false" colorscheme="dark" fullheight="false"><links jcr:primaryType="nt:unstructured"><c87
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c87><c88
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c88><c89
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c89></links>
-        </textlinks90><title91 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title91><textlinks95
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="false" colorscheme="dark" fullheight="true"><links jcr:primaryType="nt:unstructured"><c92
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c92><c93
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c93><c94
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c94></links>
-        </textlinks95><title96 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title96><textlinks100
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="false" colorscheme="light" fullheight="false"><links jcr:primaryType="nt:unstructured"><c97
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c97><c98
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c98><c99
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c99></links>
-        </textlinks100><title101 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title101><textlinks105
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="false" colorscheme="light" fullheight="true"><links jcr:primaryType="nt:unstructured"><c102
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c102><c103
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c103><c104
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c104></links>
-        </textlinks105><title106 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title106><textlinks110
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="false" colorscheme="" fullheight="false"><links jcr:primaryType="nt:unstructured"><c107
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c107><c108
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c108><c109
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c109></links>
-        </textlinks110><title111 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title111><textlinks115
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="false" colorscheme="" fullheight="true"><links jcr:primaryType="nt:unstructured"><c112
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c112><c113
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c113><c114
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c114></links>
-        </textlinks115><title116 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title116><textlinks120
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false"><links jcr:primaryType="nt:unstructured"><c117
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c117><c118
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c118><c119
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c119></links>
-        </textlinks120><title121 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title121><textlinks125
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true"><links jcr:primaryType="nt:unstructured"><c122
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c122><c123
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c123><c124
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c124></links>
-        </textlinks125><title126 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title126><textlinks130
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false"><links jcr:primaryType="nt:unstructured"><c127
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c127><c128
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c128><c129
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c129></links>
-        </textlinks130><title131 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title131><textlinks135
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true"><links jcr:primaryType="nt:unstructured"><c132
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c132><c133
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c133><c134
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c134></links>
-        </textlinks135><title136 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
-            backgroundtype="color"
-            bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
-        </title136><textlinks140
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false"><links jcr:primaryType="nt:unstructured"><c137
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c137><c138
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c138><c139
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c139></links>
-        </textlinks140><title141 jcr:primaryType="nt:unstructured" 
-            sling:resourceType="themecleanflex/components/richtext" 
-            toppadding="25"
-            bottompadding="25"
-            custombackground="true"
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+        </pager0>
+        <container146
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="themecleanflex/components/container"
+            htmlelement="main">
+            [object Object]
+            <title1 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title1>
+            <textlinks5
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="dark"
+                fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c2
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c2>
+                    <c3
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c3>
+                    <c4
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c4>
+                </links>
+            </textlinks5>
+            <title6 jcr:primaryType="nt:unstructured"
+                    sling:resourceType="themecleanflex/components/richtext"
+                    toppadding="25"
+                    bottompadding="25"
+                    custombackground="true"
+                    backgroundtype="color"
+                    bgcolor="#eeeeee"
+                    text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title6>
+            <textlinks10
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c7
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c7>
+                    <c8
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c8>
+                    <c9
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c9>
+                </links>
+            </textlinks10>
+            <title11 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title11>
+            <textlinks15
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme="light"
+                fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c12
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c12>
+                    <c13
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c13>
+                    <c14
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c14>
+                </links>
+            </textlinks15>
+            <title16 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title16>
+            <textlinks20
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c17
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c17>
+                    <c18
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c18>
+                    <c19
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c19>
+                </links>
+            </textlinks20>
+            <title21 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: color; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title21>
+            <textlinks25
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="color" bgcolor="#ff80c0" colorscheme=""
+                fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c22
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c22>
+                    <c23
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c23>
+                    <c24
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c24>
+                </links>
+            </textlinks25>
+            <title26 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title26>
+            <textlinks30
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c27
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c27>
+                    <c28
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c28>
+                    <c29
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c29>
+                </links>
+            </textlinks30>
+            <title31 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title31>
+            <textlinks35
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="dark" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c32
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c32>
+                    <c33
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c33>
+                    <c34
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c34>
+                </links>
+            </textlinks35>
+            <title36 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title36>
+            <textlinks40
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c37
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c37>
+                    <c38
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c38>
+                    <c39
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c39>
+                </links>
+            </textlinks40>
+            <title41 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title41>
+            <textlinks45
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="light" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c42
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c42>
+                    <c43
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c43>
+                    <c44
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c44>
+                </links>
+            </textlinks45>
+            <title46 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title46>
+            <textlinks50
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c47
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c47>
+                    <c48
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c48>
+                    <c49
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c49>
+                </links>
+            </textlinks50>
+            <title51 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: gradient; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title51>
+            <textlinks55
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="gradient" bgcolor="#ff8040" color2="#0080ff"
+                colorscheme="" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c52
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c52>
+                    <c53
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c53>
+                    <c54
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c54>
+                </links>
+            </textlinks55>
+            <title56 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title56>
+            <textlinks60
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c57
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c57>
+                    <c58
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c58>
+                    <c59
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c59>
+                </links>
+            </textlinks60>
+            <title61 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title61>
+            <textlinks65
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="dark" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c62
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c62>
+                    <c63
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c63>
+                    <c64
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c64>
+                </links>
+            </textlinks65>
+            <title66 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title66>
+            <textlinks70
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c67
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c67>
+                    <c68
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c68>
+                    <c69
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c69>
+                </links>
+            </textlinks70>
+            <title71 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title71>
+            <textlinks75
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="light" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c72
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c72>
+                    <c73
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c73>
+                    <c74
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c74>
+                </links>
+            </textlinks75>
+            <title76 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title76>
+            <textlinks80
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c77
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c77>
+                    <c78
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c78>
+                    <c79
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c79>
+                </links>
+            </textlinks80>
+            <title81 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: image; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title81>
+            <textlinks85
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="image"
+                bgimage="/content/themecleanflex/assets/samples/beach-bird-s-eye-view-daytime-1249586.jpg"
+                colorscheme="" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c82
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c82>
+                    <c83
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c83>
+                    <c84
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c84>
+                </links>
+            </textlinks85>
+            <title86 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title86>
+            <textlinks90
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="false" colorscheme="dark" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c87
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c87>
+                    <c88
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c88>
+                    <c89
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c89>
+                </links>
+            </textlinks90>
+            <title91 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title91>
+            <textlinks95
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="false" colorscheme="dark" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c92
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c92>
+                    <c93
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c93>
+                    <c94
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c94>
+                </links>
+            </textlinks95>
+            <title96 jcr:primaryType="nt:unstructured"
+                     sling:resourceType="themecleanflex/components/richtext"
+                     toppadding="25"
+                     bottompadding="25"
+                     custombackground="true"
+                     backgroundtype="color"
+                     bgcolor="#eeeeee"
+                     text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title96>
+            <textlinks100
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="false" colorscheme="light" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c97
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c97>
+                    <c98
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c98>
+                    <c99
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c99>
+                </links>
+            </textlinks100>
+            <title101 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title101>
+            <textlinks105
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="false" colorscheme="light" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c102
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c102>
+                    <c103
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c103>
+                    <c104
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c104>
+                </links>
+            </textlinks105>
+            <title106 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title106>
+            <textlinks110
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="false" colorscheme="" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c107
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c107>
+                    <c108
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c108>
+                    <c109
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c109>
+                </links>
+            </textlinks110>
+            <title111 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: none; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title111>
+            <textlinks115
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="false" colorscheme="" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c112
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c112>
+                    <c113
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c113>
+                    <c114
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c114>
+                </links>
+            </textlinks115>
+            <title116 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: dark; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title116>
+            <textlinks120
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c117
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c117>
+                    <c118
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c118>
+                    <c119
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c119>
+                </links>
+            </textlinks120>
+            <title121 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: dark; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title121>
+            <textlinks125
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="dark" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c122
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c122>
+                    <c123
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c123>
+                    <c124
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c124>
+                </links>
+            </textlinks125>
+            <title126 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: light; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title126>
+            <textlinks130
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c127
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c127>
+                    <c128
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c128>
+                    <c129
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c129>
+                </links>
+            </textlinks130>
+            <title131 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: light; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title131>
+            <textlinks135
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="light" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c132
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c132>
+                    <c133
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c133>
+                    <c134
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c134>
+                </links>
+            </textlinks135>
+            <title136 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: none; fullheight: false (.hidden)&lt;/h2&gt;">
+            </title136>
+            <textlinks140
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="false">
+                <links jcr:primaryType="nt:unstructured">
+                    <c137
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c137>
+                    <c138
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c138>
+                    <c139
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c139>
+                </links>
+            </textlinks140>
+            <title141 jcr:primaryType="nt:unstructured"
+                      sling:resourceType="themecleanflex/components/richtext"
+                      toppadding="25"
+                      bottompadding="25"
+                      custombackground="true"
+                      backgroundtype="color"
+                      bgcolor="#eeeeee"
+                      text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
+            </title141>
+            <textlinks145
+                jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks"
+                custombackground="true" bgsize="cover" backgroundtype="video"
+                bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true">
+                <links jcr:primaryType="nt:unstructured">
+                    <c142
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services"
+                        color="dark">
+                    </c142>
+                    <c143
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us"
+                        color="dark">
+                    </c143>
+                    <c144
+                        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us"
+                        color="dark">
+                    </c144>
+                </links>
+            </textlinks145>
+        </container146>
+        <pager147
+            colorscheme="light"
+            toppadding="30"
+            bottompadding="30"
+            custombackground="false"
             backgroundtype="color"
             bgcolor="#eeeeee"
-            text="&lt;h2&gt;Text Links Sample Variation - background: video; colorscheme: none; fullheight: true (.hidden)&lt;/h2&gt;">
-        </title141><textlinks145
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/textlinks" custombackground="true" bgsize="cover" backgroundtype="video" bgvideo="https://www.youtube.com/embed/Ju86mknumYM" colorscheme="" fullheight="true"><links jcr:primaryType="nt:unstructured"><c142
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Services" color="dark">
-        </c142><c143
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="About Us" color="dark">
-        </c143><c144
-        jcr:primaryType="nt:unstructured" link="/content/themecleanflex/pages" text="Contact Us" color="dark">
-        </c144></links>
-        </textlinks145>
-        </container146><pager147
-        colorscheme="light"
-        toppadding="30"
-        bottompadding="30"
-        custombackground="false"
-        backgroundtype="color"
-        bgcolor="#eeeeee"
-        htmlelement="nav"
-        prevlabel="&lt; previous"
-        nextlabel="next &gt;"
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
+            htmlelement="nav"
+            prevlabel="&lt; previous"
+            nextlabel="next &gt;"
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/pager">
         </pager147>
         <clfooter
-        jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer" backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light" showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg" logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60" copyright="Copyright 2019 Peregrine - All Rights Reserved">
-        <columns jcr:primaryType="nt:unstructured">
-        <c3
-        jcr:primaryType="nt:unstructured" title="" text="">
-        </c3><c4
-        jcr:primaryType="nt:unstructured" title="Contact" text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
-        </c4><c5
-        jcr:primaryType="nt:unstructured" title="Location" text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
-        </c5></columns>
-<icons jcr:primaryType="nt:unstructured"></icons>
-        </clfooter>        
-        </jcr:content></jcr:root>
\ No newline at end of file
+            jcr:primaryType="nt:unstructured" sling:resourceType="themecleanflex/components/footer" htmlelement="footer"
+            backgroundtype="color" bgcolor="#eeeeee" bottompadding="0" toppadding="30" colorscheme="light"
+            showlogo="true" logo="/content/themecleanflex/assets/samples/peregrine-logo.svg"
+            logourl="/content/themecleanflex/pages/library.html" logoalttext="Peregrine CMS Logo" logosize="60"
+            copyright="Copyright 2019 Peregrine - All Rights Reserved">
+            <columns jcr:primaryType="nt:unstructured">
+                <c3
+                    jcr:primaryType="nt:unstructured" title="" text="">
+                </c3>
+                <c4
+                    jcr:primaryType="nt:unstructured" title="Contact"
+                    text="&lt;p&gt;info@headwire.com&lt;br&gt;&lt;/p&gt;">
+                </c4>
+                <c5
+                    jcr:primaryType="nt:unstructured" title="Location"
+                    text="&lt;p&gt;23293 S Pointe Drive, Laguna Hills, CA 92653&lt;/p&gt;">
+                </c5>
+            </columns>
+            <icons jcr:primaryType="nt:unstructured"></icons>
+        </clfooter>
+    </jcr:content>
+</jcr:root>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/serviceworker.js b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/serviceworker.js
index 61f932753..3db1a9401 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/serviceworker.js
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/serviceworker.js
@@ -1,55 +1,54 @@
-
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.2.0/workbox-sw.js');
 
 if (workbox) {
-  console.log(`init service worker`);
-  
-  workbox.precaching.precacheAndRoute(['/content/themecleanflex/pages/index.html']);
-  workbox.routing.registerRoute(
-  // Cache CSS files.
-  /\.css$/,
-  // Use cache but update in the background.
-  new workbox.strategies.NetworkFirst({
-    // Use a custom cache name.
-    cacheName: 'css-cache',
-  })
-  );
+    console.log(`init service worker`);
+
+    workbox.precaching.precacheAndRoute(['/content/themecleanflex/pages/index.html']);
+    workbox.routing.registerRoute(
+        // Cache CSS files.
+        /\.css$/,
+        // Use cache but update in the background.
+        new workbox.strategies.NetworkFirst({
+            // Use a custom cache name.
+            cacheName: 'css-cache',
+        }),
+    );
+
+    workbox.routing.registerRoute(
+        // Cache CSS files.
+        /\.json$/,
+        // Use cache but update in the background.
+        new workbox.strategies.NetworkFirst({
+            // Use a custom cache name.
+            cacheName: 'json-cache',
+        }),
+    );
 
-workbox.routing.registerRoute(
-  // Cache CSS files.
-  /\.json$/,
-  // Use cache but update in the background.
-  new workbox.strategies.NetworkFirst({
-    // Use a custom cache name.
-    cacheName: 'json-cache',
-  })
-);
+    workbox.routing.registerRoute(
+        // Cache CSS files.
+        /\.html$/,
+        // Use cache but update in the background.
+        new workbox.strategies.NetworkFirst(),
+    );
 
-workbox.routing.registerRoute(
-  // Cache CSS files.
-  /\.html$/,
-  // Use cache but update in the background.
-  new workbox.strategies.NetworkFirst()
-);
+    workbox.routing.registerRoute(
+        // Cache image files.
+        /\.(?:png|jpg|jpeg|svg|gif)$/,
+        // Use the cache if it's available.
+        new workbox.strategies.CacheFirst({
+            // Use a custom cache name.
+            cacheName: 'image-cache',
+            plugins: [
+                new workbox.expiration.Plugin({
+                    // Cache only 20 images.
+                    maxEntries: 20,
+                    // Cache for a maximum of a week.
+                    maxAgeSeconds: 7 * 24 * 60 * 60,
+                }),
+            ],
+        }),
+    );
 
-workbox.routing.registerRoute(
-  // Cache image files.
-  /\.(?:png|jpg|jpeg|svg|gif)$/,
-  // Use the cache if it's available.
-  new workbox.strategies.CacheFirst({
-    // Use a custom cache name.
-    cacheName: 'image-cache',
-    plugins: [
-      new workbox.expiration.Plugin({
-        // Cache only 20 images.
-        maxEntries: 20,
-        // Cache for a maximum of a week.
-        maxAgeSeconds: 7 * 24 * 60 * 60,
-      })
-    ],
-  })
-);
-  
 } else {
-  console.log(`no service worker, sorry`);
+    console.log(`no service worker, sorry`);
 }
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/sitemap/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/sitemap/.content.xml
index 436b54e4c..f01a2625b 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/sitemap/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/sitemap/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T15:49:05.794-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T15:49:05.794-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T15:49:05.794-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/.content.xml
index b640429a3..b12fb9d92 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T12:16:50.935-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T12:16:50.935-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T12:16:50.935-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/about-us/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/about-us/.content.xml
index 029919926..6af83b93d 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/about-us/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/about-us/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T13:02:41.931-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T13:02:41.931-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T13:02:41.931-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/article/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/article/.content.xml
index 16f6e262d..a3543f01f 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/article/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/article/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T13:41:56.107-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T13:41:56.107-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T13:41:56.107-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/author/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/author/.content.xml
index 2197cb26d..1d38e0cd7 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/author/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/author/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T14:30:47.332-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T14:30:47.332-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T14:30:47.332-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/team/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/team/.content.xml
index 4894c1a4a..abd47c92f 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/team/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/pages/skeleton-pages/team/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T12:49:47.470-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T12:49:47.470-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T12:49:47.470-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml
index 5b6798665..9937e7690 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml
@@ -1,15 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root
-  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  jcr:primaryType="per:Page">
+    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="per:Page">
 
-  <jcr:content
-    jcr:primaryType="per:PageContent"
-    sling:resourceType="themecleanflex/components/page"
-    jcr:title="themecleanflex root template"
-    siteCSS="[/content/themecleanflex/pages/css/commons.css,/content/themecleanflex/pages/css/palettes/default.css,/content/themecleanflex/pages/css/palette.css,/etc/felibs/themecleanflex.css,/content/themecleanflex/pages/css/custom.css,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap]"
-    prefetchDNS="[https://www.youtube.com,https://s.ytimg.com,https://www.google.com,https://fonts.gstatic.com,https://www.youtube-nocookie.com]"/>
+    <jcr:content
+        jcr:primaryType="per:PageContent"
+        sling:resourceType="themecleanflex/components/page"
+        jcr:title="themecleanflex root template"
+        siteCSS="[/content/themecleanflex/pages/css/commons.css,/content/themecleanflex/pages/css/palettes/default.css,/content/themecleanflex/pages/css/palette.css,/etc/felibs/themecleanflex.css,/content/themecleanflex/pages/css/custom.css,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap]"
+        prefetchDNS="[https://www.youtube.com,https://s.ytimg.com,https://www.google.com,https://fonts.gstatic.com,https://www.youtube-nocookie.com]"/>
 
     <footer/>
     <blank/>
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/blank/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/blank/.content.xml
index 902609de5..980dc6d93 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/blank/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/blank/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T10:37:43.991-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T10:37:43.991-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T10:37:43.991-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/.content.xml
index 152532ebd..47a8be999 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T16:05:09.594-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T16:05:09.594-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T16:05:09.594-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/.content.xml
index 2e8bf0606..d6107edeb 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-14T06:58:31.113-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-14T06:58:31.113-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-14T06:58:31.113-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/article/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/article/.content.xml
index 0e999c437..f0ce46948 100644
--- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/article/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/footer/header-footer/article/.content.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
-    jcr:lastModified="{Date}2020-07-13T14:41:18.322-07:00"
-    jcr:lastModifiedBy="admin"
-    jcr:primaryType="per:Page">
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+          xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:per="http://www.peregrine-cms.com/jcr/cms/1.0"
+          jcr:lastModified="{Date}2020-07-13T14:41:18.322-07:00"
+          jcr:lastModifiedBy="admin"
+          jcr:primaryType="per:Page">
     <jcr:content
         jcr:lastModified="{Date}2020-07-13T14:41:18.322-07:00"
         jcr:lastModifiedBy="admin"
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/.content.xml b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/.content.xml
index abca5a074..3ab1703cb 100644
--- a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/.content.xml
+++ b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/.content.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root
-  xmlns:jcr="http://www.jcp.org/jcr/1.0"
-  xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
-  jcr:primaryType="per:FeLib"
-  jcr:title="themecleanflex"
-  jcr:description="themecleanflex"
-  sling:resourceType="felib/components/lib"/>
\ No newline at end of file
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    jcr:primaryType="per:FeLib"
+    jcr:title="themecleanflex"
+    jcr:description="themecleanflex"
+    sling:resourceType="felib/components/lib"/>
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css
index bcbcd0e6a..1135192a6 100644
--- a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css
+++ b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css
@@ -1,41 +1,41 @@
 :root {
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-size-xs: .75rem;
-  --font-size-sm: .875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-5xl: 3rem;
-  --font-size-6xl: 4rem;
-  --line-height-1: 1.5rem;
-  --line-height-2: 1.75rem;
-  --line-height-3: 2.125rem;
-  --line-height-4: 2.5rem;
-  --line-height-5: 3.25rem;
-  --line-height-6: 4.25rem;
-  --spacing-0: 0;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-  --spacing-10: 2.5rem;
-  --spacing-12: 3rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-32: 8rem;
-  --spacing-40: 10rem;
-  --spacing-48: 12rem;
-  --spacing-56: 14rem;
-  --spacing-64: 16rem;
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-size-xs: .75rem;
+    --font-size-sm: .875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 3rem;
+    --font-size-6xl: 4rem;
+    --line-height-1: 1.5rem;
+    --line-height-2: 1.75rem;
+    --line-height-3: 2.125rem;
+    --line-height-4: 2.5rem;
+    --line-height-5: 3.25rem;
+    --line-height-6: 4.25rem;
+    --spacing-0: 0;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
+    --spacing-10: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-32: 8rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --spacing-56: 14rem;
+    --spacing-64: 16rem;
 }
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -49,8 +49,8 @@
  */
 
 html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -61,7 +61,7 @@ html {
  */
 
 body {
-  margin: 0;
+    margin: 0;
 }
 
 /**
@@ -69,7 +69,7 @@ body {
  */
 
 main {
-  display: block;
+    display: block;
 }
 
 /**
@@ -78,8 +78,8 @@ main {
  */
 
 h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+    font-size: 2em;
+    margin: 0.67em 0;
 }
 
 /* Grouping content
@@ -91,9 +91,9 @@ h1 {
  */
 
 hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
 }
 
 /**
@@ -102,8 +102,8 @@ hr {
  */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
@@ -114,7 +114,7 @@ pre {
  */
 
 a {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 /**
@@ -128,7 +128,7 @@ a {
 
 
 strong {
-  font-weight: bolder;
+    font-weight: bolder;
 }
 
 /**
@@ -137,8 +137,8 @@ strong {
  */
 
 code {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
 }
 
 /**
@@ -146,7 +146,7 @@ code {
  */
 
 small {
-  font-size: 80%;
+    font-size: 80%;
 }
 
 /**
@@ -162,7 +162,7 @@ small {
  */
 
 img {
-  border-style: none;
+    border-style: none;
 }
 
 /* Forms
@@ -175,10 +175,10 @@ img {
 
 button,
 input {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
 }
 
 /**
@@ -188,7 +188,7 @@ input {
 
 button,
 input { /* 1 */
-  overflow: visible;
+    overflow: visible;
 }
 
 /**
@@ -197,7 +197,7 @@ input { /* 1 */
  */
 
 button { /* 1 */
-  text-transform: none;
+    text-transform: none;
 }
 
 /**
@@ -208,7 +208,7 @@ button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
+    -webkit-appearance: button;
 }
 
 /**
@@ -219,8 +219,8 @@ button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+    border-style: none;
+    padding: 0;
 }
 
 /**
@@ -231,7 +231,7 @@ button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
+    outline: 1px dotted ButtonText;
 }
 
 /**
@@ -246,12 +246,12 @@ button:-moz-focusring,
  */
 
 legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
 }
 
 /**
@@ -269,8 +269,8 @@ legend {
 
 [type="checkbox"],
 [type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
 }
 
 /**
@@ -279,7 +279,7 @@ legend {
 
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
-  height: auto;
+    height: auto;
 }
 
 /**
@@ -288,8 +288,8 @@ legend {
  */
 
 [type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
 }
 
 /**
@@ -297,7 +297,7 @@ legend {
  */
 
 [type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 /**
@@ -306,8 +306,8 @@ legend {
  */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
 }
 
 /* Interactive
@@ -329,7 +329,7 @@ legend {
  */
 
 template {
-  display: none;
+    display: none;
 }
 
 /**
@@ -337,7 +337,7 @@ template {
  */
 
 [hidden] {
-  display: none;
+    display: none;
 }
 
 /**
@@ -359,13 +359,13 @@ h5,
 hr,
 p,
 pre {
-  margin: 0;
+    margin: 0;
 }
 
 button {
-  background-color: transparent;
-  background-image: none;
-  padding: 0;
+    background-color: transparent;
+    background-image: none;
+    padding: 0;
 }
 
 /**
@@ -374,15 +374,15 @@ button {
  */
 
 button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
 }
 
 
 ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
 
 /**
@@ -397,8 +397,8 @@ ul {
  */
 
 html {
-  font-family: var(--font-sans); /* 1 */
-  line-height: 1.5; /* 2 */
+    font-family: var(--font-sans); /* 1 */
+    line-height: 1.5; /* 2 */
 }
 
 /**
@@ -430,10 +430,10 @@ html {
 *,
 ::before,
 ::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: var(--color-gray-300); /* 2 */
+    box-sizing: border-box; /* 1 */
+    border-width: 0; /* 2 */
+    border-style: solid; /* 2 */
+    border-color: var(--color-gray-300); /* 2 */
 }
 
 /*
@@ -441,7 +441,7 @@ html {
  */
 
 hr {
-  border-top-width: 1px;
+    border-top-width: 1px;
 }
 
 /**
@@ -455,16 +455,16 @@ hr {
  */
 
 img {
-  border-style: solid;
+    border-style: solid;
 }
 
 input::placeholder {
-  color: #a0aec0;
+    color: #a0aec0;
 }
 
 button,
 [role="button"] {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 h1,
@@ -472,8 +472,8 @@ h2,
 h3,
 h4,
 h5 {
-  font-size: inherit;
-  font-weight: inherit;
+    font-size: inherit;
+    font-weight: inherit;
 }
 
 /**
@@ -482,8 +482,8 @@ h5 {
  */
 
 a {
-  color: inherit;
-  text-decoration: inherit;
+    color: inherit;
+    text-decoration: inherit;
 }
 
 /**
@@ -496,9 +496,9 @@ a {
 
 button,
 input {
-  padding: 0;
-  line-height: inherit;
-  color: inherit;
+    padding: 0;
+    line-height: inherit;
+    color: inherit;
 }
 
 /**
@@ -510,7 +510,7 @@ input {
 
 pre,
 code {
-  font-family: var(--font-mono);
+    font-family: var(--font-mono);
 }
 
 /**
@@ -526,8 +526,8 @@ svg,
 video,
 canvas,
 iframe {
-  display: block;
-  vertical-align: middle;
+    display: block;
+    vertical-align: middle;
 }
 
 /**
@@ -539,785 +539,785 @@ iframe {
 
 img,
 video {
-  max-width: 100%;
-  height: auto;
+    max-width: 100%;
+    height: auto;
 }
 
 .container {
-  width: 100%;
+    width: 100%;
 }
 
 @media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
+    .container {
+        max-width: 640px;
+    }
 }
 
 @media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
+    .container {
+        max-width: 768px;
+    }
 }
 
 @media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
+    .container {
+        max-width: 1024px;
+    }
 }
 
 @media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
+    .container {
+        max-width: 1280px;
+    }
 }
 
 .bg-white {
-  --bg-opacity: 1;
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, var(--bg-opacity));
+    --bg-opacity: 1;
+    background-color: #ffffff;
+    background-color: rgba(255, 255, 255, var(--bg-opacity));
 }
 
 .bg-gray-800 {
-  background-color: var(--color-gray-800);
+    background-color: var(--color-gray-800);
 }
 
 .bg-red-600 {
-  background-color: var(--color-red-600);
+    background-color: var(--color-red-600);
 }
 
 .bg-red-700 {
-  background-color: var(--color-red-700);
+    background-color: var(--color-red-700);
 }
 
 .bg-orange-600 {
-  background-color: var(--color-orange-600);
+    background-color: var(--color-orange-600);
 }
 
 .bg-orange-700 {
-  background-color: var(--color-orange-700);
+    background-color: var(--color-orange-700);
 }
 
 .bg-yellow-600 {
-  background-color: var(--color-yellow-600);
+    background-color: var(--color-yellow-600);
 }
 
 .bg-green-600 {
-  background-color: var(--color-green-600);
+    background-color: var(--color-green-600);
 }
 
 .bg-green-700 {
-  background-color: var(--color-green-700);
+    background-color: var(--color-green-700);
 }
 
 .bg-blue-600 {
-  background-color: var(--color-blue-600);
+    background-color: var(--color-blue-600);
 }
 
 .bg-blue-700 {
-  background-color: var(--color-blue-700);
+    background-color: var(--color-blue-700);
 }
 
 .bg-secondary {
-  background-color: var(--bg-secondary);
+    background-color: var(--bg-secondary);
 }
 
 .hover\:bg-black:hover {
-  --bg-opacity: 1;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, var(--bg-opacity));
+    --bg-opacity: 1;
+    background-color: #000000;
+    background-color: rgba(0, 0, 0, var(--bg-opacity));
 }
 
 .hover\:bg-gray-200:hover {
-  background-color: var(--color-gray-200);
+    background-color: var(--color-gray-200);
 }
 
 .hover\:bg-blue-700:hover {
-  background-color: var(--color-blue-700);
+    background-color: var(--color-blue-700);
 }
 
 .border-gray-200 {
-  border-color: var(--color-gray-200);
+    border-color: var(--color-gray-200);
 }
 
 .border-gray-300 {
-  border-color: var(--color-gray-300);
+    border-color: var(--color-gray-300);
 }
 
 .border-gray-800 {
-  border-color: var(--color-gray-800);
+    border-color: var(--color-gray-800);
 }
 
 .border-gray-900 {
-  border-color: var(--color-gray-900);
+    border-color: var(--color-gray-900);
 }
 
 .border-blue-700 {
-  border-color: var(--color-blue-700);
+    border-color: var(--color-blue-700);
 }
 
 .rounded-none {
-  border-radius: 0;
+    border-radius: 0;
 }
 
 .rounded-sm {
-  border-radius: 0.125rem;
+    border-radius: 0.125rem;
 }
 
 .rounded {
-  border-radius: 0.25rem;
+    border-radius: 0.25rem;
 }
 
 .rounded-lg {
-  border-radius: 0.5rem;
+    border-radius: 0.5rem;
 }
 
 .rounded-full {
-  border-radius: 9999px;
+    border-radius: 9999px;
 }
 
 .border-solid {
-  border-style: solid;
+    border-style: solid;
 }
 
 .border {
-  border-width: 1px;
+    border-width: 1px;
 }
 
 .border-t-2 {
-  border-top-width: 2px;
+    border-top-width: 2px;
 }
 
 .border-b-4 {
-  border-bottom-width: 4px;
+    border-bottom-width: 4px;
 }
 
 .border-l-4 {
-  border-left-width: 4px;
+    border-left-width: 4px;
 }
 
 .border-l-8 {
-  border-left-width: 8px;
+    border-left-width: 8px;
 }
 
 .border-b {
-  border-bottom-width: 1px;
+    border-bottom-width: 1px;
 }
 
 .cursor-pointer {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .block {
-  display: block;
+    display: block;
 }
 
 .flex {
-  display: flex;
+    display: flex;
 }
 
 .hidden {
-  display: none;
+    display: none;
 }
 
 .flex-col {
-  flex-direction: column;
+    flex-direction: column;
 }
 
 .flex-col-reverse {
-  flex-direction: column-reverse;
+    flex-direction: column-reverse;
 }
 
 .flex-wrap {
-  flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 
 .items-start {
-  align-items: flex-start;
+    align-items: flex-start;
 }
 
 .items-end {
-  align-items: flex-end;
+    align-items: flex-end;
 }
 
 .items-center {
-  align-items: center;
+    align-items: center;
 }
 
 .items-baseline {
-  align-items: baseline;
+    align-items: baseline;
 }
 
 .items-stretch {
-  align-items: stretch;
+    align-items: stretch;
 }
 
 .self-start {
-  align-self: flex-start;
+    align-self: flex-start;
 }
 
 .self-end {
-  align-self: flex-end;
+    align-self: flex-end;
 }
 
 .self-center {
-  align-self: center;
+    align-self: center;
 }
 
 .self-stretch {
-  align-self: stretch;
+    align-self: stretch;
 }
 
 .justify-start {
-  justify-content: flex-start;
+    justify-content: flex-start;
 }
 
 .justify-end {
-  justify-content: flex-end;
+    justify-content: flex-end;
 }
 
 .justify-center {
-  justify-content: center;
+    justify-content: center;
 }
 
 .justify-between {
-  justify-content: space-between;
+    justify-content: space-between;
 }
 
 .flex-1 {
-  flex: 1 1 0%;
+    flex: 1 1 0%;
 }
 
 .flex-grow-0 {
-  flex-grow: 0;
+    flex-grow: 0;
 }
 
 .flex-grow {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 .font-normal {
-  font-weight: 400;
+    font-weight: 400;
 }
 
 .font-medium {
-  font-weight: 500;
+    font-weight: 500;
 }
 
 .font-semibold {
-  font-weight: 600;
+    font-weight: 600;
 }
 
 .font-bold {
-  font-weight: 700;
+    font-weight: 700;
 }
 
 .h-full {
-  height: 100%;
+    height: 100%;
 }
 
 .text-lg {
-  font-size: var(--font-size-lg);
+    font-size: var(--font-size-lg);
 }
 
 .text-xl {
-  font-size: var(--font-size-xl);
+    font-size: var(--font-size-xl);
 }
 
 .text-2xl {
-  font-size: var(--font-size-2xl);
+    font-size: var(--font-size-2xl);
 }
 
 .text-3xl {
-  font-size: var(--font-size-3xl);
+    font-size: var(--font-size-3xl);
 }
 
 .text-4xl {
-  font-size: var(--font-size-4xl);
+    font-size: var(--font-size-4xl);
 }
 
 .text-5xl {
-  font-size: var(--font-size-5xl);
+    font-size: var(--font-size-5xl);
 }
 
 .list-none {
-  list-style-type: none;
+    list-style-type: none;
 }
 
 .m-0 {
-  margin: var(--spacing-0);
+    margin: var(--spacing-0);
 }
 
 .m-1 {
-  margin: var(--spacing-1);
+    margin: var(--spacing-1);
 }
 
 .m-2 {
-  margin: var(--spacing-2);
+    margin: var(--spacing-2);
 }
 
 .-m-1 {
-  margin: calc(var(--spacing-1) * -1);
+    margin: calc(var(--spacing-1) * -1);
 }
 
 .my-2 {
-  margin-top: var(--spacing-2);
-  margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-2);
+    margin-bottom: var(--spacing-2);
 }
 
 .mx-2 {
-  margin-left: var(--spacing-2);
-  margin-right: var(--spacing-2);
+    margin-left: var(--spacing-2);
+    margin-right: var(--spacing-2);
 }
 
 .my-3 {
-  margin-top: var(--spacing-3);
-  margin-bottom: var(--spacing-3);
+    margin-top: var(--spacing-3);
+    margin-bottom: var(--spacing-3);
 }
 
 .mx-3 {
-  margin-left: var(--spacing-3);
-  margin-right: var(--spacing-3);
+    margin-left: var(--spacing-3);
+    margin-right: var(--spacing-3);
 }
 
 .my-6 {
-  margin-top: var(--spacing-6);
-  margin-bottom: var(--spacing-6);
+    margin-top: var(--spacing-6);
+    margin-bottom: var(--spacing-6);
 }
 
 .mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .-mx-2 {
-  margin-left: calc(var(--spacing-2) * -1);
-  margin-right: calc(var(--spacing-2) * -1);
+    margin-left: calc(var(--spacing-2) * -1);
+    margin-right: calc(var(--spacing-2) * -1);
 }
 
 .-mx-3 {
-  margin-left: calc(var(--spacing-3) * -1);
-  margin-right: calc(var(--spacing-3) * -1);
+    margin-left: calc(var(--spacing-3) * -1);
+    margin-right: calc(var(--spacing-3) * -1);
 }
 
 .mt-0 {
-  margin-top: var(--spacing-0);
+    margin-top: var(--spacing-0);
 }
 
 .mb-1 {
-  margin-bottom: var(--spacing-1);
+    margin-bottom: var(--spacing-1);
 }
 
 .mr-2 {
-  margin-right: var(--spacing-2);
+    margin-right: var(--spacing-2);
 }
 
 .ml-2 {
-  margin-left: var(--spacing-2);
+    margin-left: var(--spacing-2);
 }
 
 .mt-3 {
-  margin-top: var(--spacing-3);
+    margin-top: var(--spacing-3);
 }
 
 .mb-3 {
-  margin-bottom: var(--spacing-3);
+    margin-bottom: var(--spacing-3);
 }
 
 .mr-4 {
-  margin-right: var(--spacing-4);
+    margin-right: var(--spacing-4);
 }
 
 .mb-6 {
-  margin-bottom: var(--spacing-6);
+    margin-bottom: var(--spacing-6);
 }
 
 .max-w-3xl {
-  max-width: 48rem;
+    max-width: 48rem;
 }
 
 .min-h-1 {
-  min-height: 1px;
+    min-height: 1px;
 }
 
 .min-h-screen {
-  min-height: 100vh;
+    min-height: 100vh;
 }
 
 .object-contain {
-  object-fit: contain;
+    object-fit: contain;
 }
 
 .object-cover {
-  object-fit: cover;
+    object-fit: cover;
 }
 
 .object-center {
-  object-position: center;
+    object-position: center;
 }
 
 .opacity-0 {
-  opacity: 0;
+    opacity: 0;
 }
 
 .opacity-100 {
-  opacity: 1;
+    opacity: 1;
 }
 
 .overflow-hidden {
-  overflow: hidden;
+    overflow: hidden;
 }
 
 .overflow-x-auto {
-  overflow-x: auto;
+    overflow-x: auto;
 }
 
 .p-0 {
-  padding: var(--spacing-0);
+    padding: var(--spacing-0);
 }
 
 .p-3 {
-  padding: var(--spacing-3);
+    padding: var(--spacing-3);
 }
 
 .p-4 {
-  padding: var(--spacing-4);
+    padding: var(--spacing-4);
 }
 
 .p-5 {
-  padding: var(--spacing-5);
+    padding: var(--spacing-5);
 }
 
 .p-6 {
-  padding: var(--spacing-6);
+    padding: var(--spacing-6);
 }
 
 .px-0 {
-  padding-left: var(--spacing-0);
-  padding-right: var(--spacing-0);
+    padding-left: var(--spacing-0);
+    padding-right: var(--spacing-0);
 }
 
 .py-1 {
-  padding-top: var(--spacing-1);
-  padding-bottom: var(--spacing-1);
+    padding-top: var(--spacing-1);
+    padding-bottom: var(--spacing-1);
 }
 
 .py-2 {
-  padding-top: var(--spacing-2);
-  padding-bottom: var(--spacing-2);
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-2);
 }
 
 .py-3 {
-  padding-top: var(--spacing-3);
-  padding-bottom: var(--spacing-3);
+    padding-top: var(--spacing-3);
+    padding-bottom: var(--spacing-3);
 }
 
 .px-4 {
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
 }
 
 .px-5 {
-  padding-left: var(--spacing-5);
-  padding-right: var(--spacing-5);
+    padding-left: var(--spacing-5);
+    padding-right: var(--spacing-5);
 }
 
 .pb-3 {
-  padding-bottom: var(--spacing-3);
+    padding-bottom: var(--spacing-3);
 }
 
 .pb-4 {
-  padding-bottom: var(--spacing-4);
+    padding-bottom: var(--spacing-4);
 }
 
 .pb-12 {
-  padding-bottom: var(--spacing-12);
+    padding-bottom: var(--spacing-12);
 }
 
 .fixed {
-  position: fixed;
+    position: fixed;
 }
 
 .absolute {
-  position: absolute;
+    position: absolute;
 }
 
 .relative {
-  position: relative;
+    position: relative;
 }
 
 .sticky {
-  position: sticky;
+    position: sticky;
 }
 
 .inset-0 {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 }
 
 .top-0 {
-  top: 0;
+    top: 0;
 }
 
 .left-0 {
-  left: 0;
+    left: 0;
 }
 
 .resize {
-  resize: both;
+    resize: both;
 }
 
 .shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 .fill-current {
-  fill: currentColor;
+    fill: currentColor;
 }
 
 .text-left {
-  text-align: left;
+    text-align: left;
 }
 
 .text-center {
-  text-align: center;
+    text-align: center;
 }
 
 .text-right {
-  text-align: right;
+    text-align: right;
 }
 
 .text-black {
-  --text-opacity: 1;
-  color: #000;
-  color: rgba(0, 0, 0, var(--text-opacity));
+    --text-opacity: 1;
+    color: #000000;
+    color: rgba(0, 0, 0, var(--text-opacity));
 }
 
 .text-white {
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
+    --text-opacity: 1;
+    color: #ffffff;
+    color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 .text-gray-200 {
-  color: var(--color-gray-200);
+    color: var(--color-gray-200);
 }
 
 .text-gray-800 {
-  color: var(--color-gray-800);
+    color: var(--color-gray-800);
 }
 
 .text-red-700 {
-  color: var(--color-red-700);
+    color: var(--color-red-700);
 }
 
 .text-orange-700 {
-  color: var(--color-orange-700);
+    color: var(--color-orange-700);
 }
 
 .text-green-700 {
-  color: var(--color-green-700);
+    color: var(--color-green-700);
 }
 
 .text-blue-700 {
-  color: var(--color-blue-700);
+    color: var(--color-blue-700);
 }
 
 .hover\:text-black:hover {
-  --text-opacity: 1;
-  color: #000;
-  color: rgba(0, 0, 0, var(--text-opacity));
+    --text-opacity: 1;
+    color: #000000;
+    color: rgba(0, 0, 0, var(--text-opacity));
 }
 
 .hover\:text-white:hover {
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
+    --text-opacity: 1;
+    color: #ffffff;
+    color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 .hover\:text-gray-200:hover {
-  color: var(--color-gray-200);
+    color: var(--color-gray-200);
 }
 
 .hover\:text-red-600:hover {
-  color: var(--color-red-600);
+    color: var(--color-red-600);
 }
 
 .hover\:text-orange-600:hover {
-  color: var(--color-orange-600);
+    color: var(--color-orange-600);
 }
 
 .hover\:text-green-600:hover {
-  color: var(--color-green-600);
+    color: var(--color-green-600);
 }
 
 .no-underline {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .hover\:underline:hover {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 .visible {
-  visibility: visible;
+    visibility: visible;
 }
 
 .invisible {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .w-auto {
-  width: auto;
+    width: auto;
 }
 
 .w-1\/2 {
-  width: 50%;
+    width: 50%;
 }
 
 .w-1\/3 {
-  width: 33.33333%;
+    width: 33.33333%;
 }
 
 .w-2\/3 {
-  width: 66.66667%;
+    width: 66.66667%;
 }
 
 .w-1\/4 {
-  width: 25%;
+    width: 25%;
 }
 
 .w-2\/4 {
-  width: 50%;
+    width: 50%;
 }
 
 .w-3\/4 {
-  width: 75%;
+    width: 75%;
 }
 
 .w-1\/5 {
-  width: 20%;
+    width: 20%;
 }
 
 .w-2\/5 {
-  width: 40%;
+    width: 40%;
 }
 
 .w-3\/5 {
-  width: 60%;
+    width: 60%;
 }
 
 .w-4\/5 {
-  width: 80%;
+    width: 80%;
 }
 
 .w-1\/6 {
-  width: 16.66667%;
+    width: 16.66667%;
 }
 
 .w-2\/6 {
-  width: 33.33333%;
+    width: 33.33333%;
 }
 
 .w-3\/6 {
-  width: 50%;
+    width: 50%;
 }
 
 .w-4\/6 {
-  width: 66.66667%;
+    width: 66.66667%;
 }
 
 .w-5\/6 {
-  width: 83.33333%;
+    width: 83.33333%;
 }
 
 .w-1\/12 {
-  width: 8.33333%;
+    width: 8.33333%;
 }
 
 .w-2\/12 {
-  width: 16.66667%;
+    width: 16.66667%;
 }
 
 .w-3\/12 {
-  width: 25%;
+    width: 25%;
 }
 
 .w-4\/12 {
-  width: 33.33333%;
+    width: 33.33333%;
 }
 
 .w-5\/12 {
-  width: 41.66667%;
+    width: 41.66667%;
 }
 
 .w-6\/12 {
-  width: 50%;
+    width: 50%;
 }
 
 .w-7\/12 {
-  width: 58.33333%;
+    width: 58.33333%;
 }
 
 .w-8\/12 {
-  width: 66.66667%;
+    width: 66.66667%;
 }
 
 .w-9\/12 {
-  width: 75%;
+    width: 75%;
 }
 
 .w-10\/12 {
-  width: 83.33333%;
+    width: 83.33333%;
 }
 
 .w-11\/12 {
-  width: 91.66667%;
+    width: 91.66667%;
 }
 
 .w-full {
-  width: 100%;
+    width: 100%;
 }
 
 .z-10 {
-  z-index: 10;
+    z-index: 10;
 }
 
 .transition-colors {
-  transition-property: background-color, border-color, color, fill, stroke;
+    transition-property: background-color, border-color, color, fill, stroke;
 }
 
 .transition-opacity {
-  transition-property: opacity;
+    transition-property: opacity;
 }
 
 .transition-transform {
-  transition-property: transform;
+    transition-property: transform;
 }
 
 .ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .duration-150 {
-  transition-duration: 150ms;
+    transition-duration: 150ms;
 }
 
 .duration-200 {
-  transition-duration: 200ms;
+    transition-duration: 200ms;
 }
 
 .aspect-ratio-16\/9 {
-  padding-bottom: 56.25%;
+    padding-bottom: 56.25%;
 }
 
 .transition-opacity {
-  transition: opacity 200ms ease;
+    transition: opacity 200ms ease;
 }
 
 .transition-height {
-  transition: height 200ms ease;
+    transition: height 200ms ease;
 }
 
 /* purgecss start ignore */
@@ -1325,114 +1325,114 @@ video {
 /* Base Overrides */
 
 html {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-base);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-base);
 }
 
 .enlarge-text h1:not([class]),
 .enlarge-text .text-5xl,
 .text-6xl {
-  font-size: var(--font-size-6xl);
-  font-weight: 800;
-  line-height: var(--line-height-6);
-  letter-spacing: -0.02em;
+    font-size: var(--font-size-6xl);
+    font-weight: 800;
+    line-height: var(--line-height-6);
+    letter-spacing: -0.02em;
 }
 
 .enlarge-text h1:not([class]),
 .enlarge-text .text-5xl:not([class*=my-]):not([class*=mt-]),
 .text-6xl {
-  margin-top: var(--spacing-24);
+    margin-top: var(--spacing-24);
 }
 
 h1:not([class]),
 .enlarge-text h2:not([class]),
 .text-5xl {
-  font-size: var(--font-size-5xl);
-  font-weight: 800;
-  line-height: var(--line-height-5);
-  letter-spacing: -0.02em;
+    font-size: var(--font-size-5xl);
+    font-weight: 800;
+    line-height: var(--line-height-5);
+    letter-spacing: -0.02em;
 }
 
 h1:not([class]),
 .enlarge-text h2:not([class]) {
-  margin-top: var(--spacing-20);
+    margin-top: var(--spacing-20);
 }
 
 h2:not([class]),
 .enlarge-text h3:not([class]),
 .text-4xl {
-  font-size: var(--font-size-4xl);
-  font-weight: 700;
-  line-height: var(--line-height-4);
-  letter-spacing: -0.04em;
+    font-size: var(--font-size-4xl);
+    font-weight: 700;
+    line-height: var(--line-height-4);
+    letter-spacing: -0.04em;
 }
 
 h2:not([class]),
 .enlarge-text h3:not([class]) {
-  margin-top: var(--spacing-16);
+    margin-top: var(--spacing-16);
 }
 
 h3:not([class]),
 .enlarge-text h4:not([class]),
 .text-3xl {
-  font-size: var(--font-size-3xl);
-  font-weight: 700;
-  line-height: var(--line-height-3);
-  letter-spacing: -0.02em;
+    font-size: var(--font-size-3xl);
+    font-weight: 700;
+    line-height: var(--line-height-3);
+    letter-spacing: -0.02em;
 }
 
 h3:not([class]),
 .enlarge-text h4:not([class]) {
-  margin-top: var(--spacing-12);
+    margin-top: var(--spacing-12);
 }
 
 h4:not([class]),
 .enlarge-text h5:not([class]),
 .text-2xl {
-  font-size: var(--font-size-2xl);
-  font-weight: 700;
-  line-height: var(--line-height-2);
-  letter-spacing: -0.02em;
+    font-size: var(--font-size-2xl);
+    font-weight: 700;
+    line-height: var(--line-height-2);
+    letter-spacing: -0.02em;
 }
 
 h4:not([class]),
 .enlarge-text h5:not([class]) {
-  margin-top: var(--spacing-10);
+    margin-top: var(--spacing-10);
 }
 
 h5:not([class]),
 .enlarge-text h6:not([class]),
 .text-xl {
-  font-size: var(--font-size-xl);
-  font-weight: 700;
-  line-height: var(--line-height-1);
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    line-height: var(--line-height-1);
 }
 
 h5:not([class]),
 .enlarge-text h6:not([class]) {
-  margin-top: var(--spacing-8);
+    margin-top: var(--spacing-8);
 }
 
 h6:not([class]) {
-  font-size: var(--font-size-lg);
-  line-height: var(--line-height-1);
-  margin-top: var(--spacing-8);
-  margin-bottom: 0;
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-1);
+    margin-top: var(--spacing-8);
+    margin-bottom: 0;
 }
 
 .enlarge-text p:not([class*=text-]),
 .enlarge-text .text-lg {
-  font-size: var(--font-size-xl);
-  line-height: var(--line-height-2);
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-2);
 }
 
 h6 {
-  font-weight: 700;
+    font-weight: 700;
 }
 
 h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]) {
-  margin-top: var(--spacing-6);
-  margin-bottom: var(--spacing-6);
+    margin-top: var(--spacing-6);
+    margin-bottom: var(--spacing-6);
 }
 
 h1:not([class]):first-child,
@@ -1441,7 +1441,7 @@ h3:not([class]):first-child,
 h4:not([class]):first-child,
 h5:not([class]):first-child,
 h6:not([class]):first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 h1:not([class]):last-child,
@@ -1450,7 +1450,7 @@ h3:not([class]):last-child,
 h4:not([class]):last-child,
 h5:not([class]):last-child,
 h6:not([class]):last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .text-xl.font-normal,
@@ -1459,697 +1459,697 @@ h6:not([class]):last-child {
 .text-4xl.font-normal,
 .text-5xl.font-normal,
 .text-6xl.font-normal {
-  font-weight: 400;
+    font-weight: 400;
 }
 
 a {
-  text-decoration: underline;
-  color: var(--color-blue-700);
+    text-decoration: underline;
+    color: var(--color-blue-700);
 }
 
 a:hover {
-  color: var(--color-blue-800);
+    color: var(--color-blue-800);
 }
 
 ul {
-  list-style-type: disc;
-  padding-left: var(--spacing-5);
-  padding-top: var(--spacing-2);
-  padding-bottom: var(--spacing-2);
-  margin: var(--spacing-0);
+    list-style-type: disc;
+    padding-left: var(--spacing-5);
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-2);
+    margin: var(--spacing-0);
 }
 
 ol {
-  list-style-type: decimal;
-  padding-left: var(--spacing-5);
-  padding-top: var(--spacing-2);
-  padding-bottom: var(--spacing-2);
-  margin: var(--spacing-0);
+    list-style-type: decimal;
+    padding-left: var(--spacing-5);
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-2);
+    margin: var(--spacing-0);
 }
 
 p {
-  margin-top: var(--spacing-3);
-  margin-bottom: var(--spacing-3);
-  line-height: var(--line-height-1);
+    margin-top: var(--spacing-3);
+    margin-bottom: var(--spacing-3);
+    line-height: var(--line-height-1);
 }
 
 .color-inherit {
-  color: inherit;
+    color: inherit;
 }
 
 .pipe-after:after {
-  content: "|";
-  margin-left: var(--spacing-2);
+    content: "|";
+    margin-left: var(--spacing-2);
 }
 
 /* Custom Utilities */
 
 .transform-rotate-90 {
-  transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
 /* Drop Shadow Helpers */
 
 .elevation-1 {
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
 
 .elevation-2 {
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
 
 .elevation-3 {
-  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
 
 .elevation-4 {
-  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
 
 .elevation-5 {
-  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
 
 /* Background */
 
 .bg-primary {
-  background: var(--bg-primary);
+    background: var(--bg-primary);
 }
 
 .bg-secondary {
-  background: var(--bg-secondary);
+    background: var(--bg-secondary);
 }
 
 /* Buttons */
 
 .btn {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  padding-top: var(--spacing-2);
-  padding-bottom: var(--spacing-2);
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-4);
-  border-radius: 0.25rem;
-  text-decoration: none;
-  transition-property: background, background-color, color, border-color;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-2);
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
+    border-radius: 0.25rem;
+    text-decoration: none;
+    transition-property: background, background-color, color, border-color;
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .btn:focus {
-  outline: 0;
-  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+    outline: 0;
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
 }
 
 .btn:hover {
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
+    --text-opacity: 1;
+    color: #ffffff;
+    color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 .btn-lg {
-  padding-top: var(--spacing-4);
-  padding-bottom: var(--spacing-4);
-  padding-left: var(--spacing-5);
-  padding-right: var(--spacing-5);
-  font-size: var(--font-size-lg)
+    padding-top: var(--spacing-4);
+    padding-bottom: var(--spacing-4);
+    padding-left: var(--spacing-5);
+    padding-right: var(--spacing-5);
+    font-size: var(--font-size-lg)
 }
 
 .btn-sm {
-  padding-top: var(--spacing-2);
-  padding-bottom: var(--spacing-2);
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
-  font-size: var(--font-size-sm)
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-2);
+    padding-left: var(--spacing-2);
+    padding-right: var(--spacing-2);
+    font-size: var(--font-size-sm)
 }
 
 .btn-blue {
-  background-color: var(--color-blue-600);
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
+    background-color: var(--color-blue-600);
+    --text-opacity: 1;
+    color: #ffffff;
+    color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 .btn-blue:hover {
-  background-color: var(--color-blue-700);
+    background-color: var(--color-blue-700);
 }
 
 .btn-green {
-  background-color: var(--color-green-600);
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
+    background-color: var(--color-green-600);
+    --text-opacity: 1;
+    color: #ffffff;
+    color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 .btn-green:hover {
-  background-color: var(--color-green-700);
+    background-color: var(--color-green-700);
 }
 
 .btn-red {
-  background-color: var(--color-red-600);
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
+    background-color: var(--color-red-600);
+    --text-opacity: 1;
+    color: #ffffff;
+    color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 .btn-red:hover {
-  background-color: var(--color-red-700);
+    background-color: var(--color-red-700);
 }
 
 .btn-orange {
-  background-color: var(--color-orange-600);
-  --text-opacity: 1;
-  color: #fff;
-  color: rgba(255, 255, 255, var(--text-opacity));
+    background-color: var(--color-orange-600);
+    --text-opacity: 1;
+    color: #ffffff;
+    color: rgba(255, 255, 255, var(--text-opacity));
 }
 
 .btn-orange:hover {
-  background-color: var(--color-orange-700);
+    background-color: var(--color-orange-700);
 }
 
 .btn-white {
-  background-color: var(--color-gray-200);
-  color: var(--color-gray-800);
+    background-color: var(--color-gray-200);
+    color: var(--color-gray-800);
 }
 
 .btn-white:hover {
-  background-color: var(--color-gray-300);
+    background-color: var(--color-gray-300);
 }
 
 .btn-black {
-  background-color: var(--color-gray-800);
-  color: var(--color-gray-200);
+    background-color: var(--color-gray-800);
+    color: var(--color-gray-200);
 }
 
 .btn-black:hover {
-  background-color: var(--color-gray-900);
+    background-color: var(--color-gray-900);
 }
 
 .media-sizeable {
-  flex-shrink: 1 !important;
+    flex-shrink: 1 !important;
 }
 
-@media (min-width: 768px){
-  .media-sizeable {
-    flex-shrink: 0 !important;
-  }
+@media (min-width: 768px) {
+    .media-sizeable {
+        flex-shrink: 0 !important;
+    }
 }
 
 /* header */
 
 [class$="components-header"] a {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
 }
 
 /* footer */
 
 [class$="components-footer"] ul {
-  list-style-type: none;
-  padding: var(--spacing-0);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
+    list-style-type: none;
+    padding: var(--spacing-0);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
 }
 
 [class$="components-footer"] ul li {
-  margin-bottom: var(--spacing-2);
+    margin-bottom: var(--spacing-2);
 }
 
 [class$="components-footer"] p {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
 }
 
 /* carousel */
 
 [class$="components-carousel"].w-full {
-  padding-left: 0;
-  padding-right: 0;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .VueCarousel-pagination {
-  position: absolute;
-  bottom: 0;
-  margin-bottom: var(--spacing-4);
-  pointer-events: none;
+    position: absolute;
+    bottom: 0;
+    margin-bottom: var(--spacing-4);
+    pointer-events: none;
 }
 
 .VueCarousel-dot-container {
-  pointer-events: auto;
+    pointer-events: auto;
 }
 
 /* accordion */
 
 [class$="components-accordion"] .img-wrapper.rounded-none img {
-  border-radius: 0;
+    border-radius: 0;
 }
 
 [class$="components-accordion"] .img-wrapper.rounded-sm img {
-  border-radius: 0.125rem;
+    border-radius: 0.125rem;
 }
 
 [class$="components-accordion"] .img-wrapper.rounded img {
-  border-radius: 0.25rem;
+    border-radius: 0.25rem;
 }
 
 [class$="components-accordion"] .img-wrapper.rounded-lg img {
-  border-radius: 0.5rem;
+    border-radius: 0.5rem;
 }
 
 [class$="components-accordion"] .img-wrapper.rounded-full img {
-  border-radius: 9999px;
+    border-radius: 9999px;
 }
 
 /* purgecss end ignore */
 
 @media (min-width: 640px) {
 
-  .sm\:mx-3 {
-    margin-left: var(--spacing-3);
-    margin-right: var(--spacing-3);
-  }
+    .sm\:mx-3 {
+        margin-left: var(--spacing-3);
+        margin-right: var(--spacing-3);
+    }
 
-  .sm\:px-0 {
-    padding-left: var(--spacing-0);
-    padding-right: var(--spacing-0);
-  }
+    .sm\:px-0 {
+        padding-left: var(--spacing-0);
+        padding-right: var(--spacing-0);
+    }
 
-  .sm\:w-auto {
-    width: auto;
-  }
+    .sm\:w-auto {
+        width: auto;
+    }
 
-  .sm\:w-1\/2 {
-    width: 50%;
-  }
+    .sm\:w-1\/2 {
+        width: 50%;
+    }
 
-  .sm\:w-1\/3 {
-    width: 33.33333%;
-  }
+    .sm\:w-1\/3 {
+        width: 33.33333%;
+    }
 
-  .sm\:w-2\/3 {
-    width: 66.66667%;
-  }
+    .sm\:w-2\/3 {
+        width: 66.66667%;
+    }
 
-  .sm\:w-1\/4 {
-    width: 25%;
-  }
+    .sm\:w-1\/4 {
+        width: 25%;
+    }
 
-  .sm\:w-2\/4 {
-    width: 50%;
-  }
+    .sm\:w-2\/4 {
+        width: 50%;
+    }
 
-  .sm\:w-3\/4 {
-    width: 75%;
-  }
+    .sm\:w-3\/4 {
+        width: 75%;
+    }
 
-  .sm\:w-1\/5 {
-    width: 20%;
-  }
+    .sm\:w-1\/5 {
+        width: 20%;
+    }
 
-  .sm\:w-2\/5 {
-    width: 40%;
-  }
+    .sm\:w-2\/5 {
+        width: 40%;
+    }
 
-  .sm\:w-3\/5 {
-    width: 60%;
-  }
+    .sm\:w-3\/5 {
+        width: 60%;
+    }
 
-  .sm\:w-4\/5 {
-    width: 80%;
-  }
+    .sm\:w-4\/5 {
+        width: 80%;
+    }
 
-  .sm\:w-1\/6 {
-    width: 16.66667%;
-  }
+    .sm\:w-1\/6 {
+        width: 16.66667%;
+    }
 
-  .sm\:w-2\/6 {
-    width: 33.33333%;
-  }
+    .sm\:w-2\/6 {
+        width: 33.33333%;
+    }
 
-  .sm\:w-3\/6 {
-    width: 50%;
-  }
+    .sm\:w-3\/6 {
+        width: 50%;
+    }
 
-  .sm\:w-4\/6 {
-    width: 66.66667%;
-  }
+    .sm\:w-4\/6 {
+        width: 66.66667%;
+    }
 
-  .sm\:w-5\/6 {
-    width: 83.33333%;
-  }
+    .sm\:w-5\/6 {
+        width: 83.33333%;
+    }
 
-  .sm\:w-1\/12 {
-    width: 8.33333%;
-  }
+    .sm\:w-1\/12 {
+        width: 8.33333%;
+    }
 
-  .sm\:w-2\/12 {
-    width: 16.66667%;
-  }
+    .sm\:w-2\/12 {
+        width: 16.66667%;
+    }
 
-  .sm\:w-3\/12 {
-    width: 25%;
-  }
+    .sm\:w-3\/12 {
+        width: 25%;
+    }
 
-  .sm\:w-4\/12 {
-    width: 33.33333%;
-  }
+    .sm\:w-4\/12 {
+        width: 33.33333%;
+    }
 
-  .sm\:w-5\/12 {
-    width: 41.66667%;
-  }
+    .sm\:w-5\/12 {
+        width: 41.66667%;
+    }
 
-  .sm\:w-6\/12 {
-    width: 50%;
-  }
+    .sm\:w-6\/12 {
+        width: 50%;
+    }
 
-  .sm\:w-7\/12 {
-    width: 58.33333%;
-  }
+    .sm\:w-7\/12 {
+        width: 58.33333%;
+    }
 
-  .sm\:w-8\/12 {
-    width: 66.66667%;
-  }
+    .sm\:w-8\/12 {
+        width: 66.66667%;
+    }
 
-  .sm\:w-9\/12 {
-    width: 75%;
-  }
+    .sm\:w-9\/12 {
+        width: 75%;
+    }
 
-  .sm\:w-10\/12 {
-    width: 83.33333%;
-  }
+    .sm\:w-10\/12 {
+        width: 83.33333%;
+    }
 
-  .sm\:w-11\/12 {
-    width: 91.66667%;
-  }
+    .sm\:w-11\/12 {
+        width: 91.66667%;
+    }
 
-  .sm\:w-full {
-    width: 100%;
-  }
+    .sm\:w-full {
+        width: 100%;
+    }
 }
 
 @media (min-width: 768px) {
 
-  .md\:flex {
-    display: flex;
-  }
+    .md\:flex {
+        display: flex;
+    }
 
-  .md\:hidden {
-    display: none;
-  }
+    .md\:hidden {
+        display: none;
+    }
 
-  .md\:flex-row {
-    flex-direction: row;
-  }
+    .md\:flex-row {
+        flex-direction: row;
+    }
 
-  .md\:flex-row-reverse {
-    flex-direction: row-reverse;
-  }
+    .md\:flex-row-reverse {
+        flex-direction: row-reverse;
+    }
 
-  .md\:justify-start {
-    justify-content: flex-start;
-  }
+    .md\:justify-start {
+        justify-content: flex-start;
+    }
 
-  .md\:justify-end {
-    justify-content: flex-end;
-  }
+    .md\:justify-end {
+        justify-content: flex-end;
+    }
 
-  .md\:flex-grow-0 {
-    flex-grow: 0;
-  }
+    .md\:flex-grow-0 {
+        flex-grow: 0;
+    }
 
-  .md\:flex-grow {
-    flex-grow: 1;
-  }
+    .md\:flex-grow {
+        flex-grow: 1;
+    }
 
-  .md\:-mx-3 {
-    margin-left: calc(var(--spacing-3) * -1);
-    margin-right: calc(var(--spacing-3) * -1);
-  }
+    .md\:-mx-3 {
+        margin-left: calc(var(--spacing-3) * -1);
+        margin-right: calc(var(--spacing-3) * -1);
+    }
 
-  .md\:mb-0 {
-    margin-bottom: var(--spacing-0);
-  }
+    .md\:mb-0 {
+        margin-bottom: var(--spacing-0);
+    }
 
-  .md\:px-3 {
-    padding-left: var(--spacing-3);
-    padding-right: var(--spacing-3);
-  }
+    .md\:px-3 {
+        padding-left: var(--spacing-3);
+        padding-right: var(--spacing-3);
+    }
 
-  .md\:w-auto {
-    width: auto;
-  }
+    .md\:w-auto {
+        width: auto;
+    }
 
-  .md\:w-1\/2 {
-    width: 50%;
-  }
+    .md\:w-1\/2 {
+        width: 50%;
+    }
 
-  .md\:w-1\/3 {
-    width: 33.33333%;
-  }
+    .md\:w-1\/3 {
+        width: 33.33333%;
+    }
 
-  .md\:w-2\/3 {
-    width: 66.66667%;
-  }
+    .md\:w-2\/3 {
+        width: 66.66667%;
+    }
 
-  .md\:w-1\/4 {
-    width: 25%;
-  }
+    .md\:w-1\/4 {
+        width: 25%;
+    }
 
-  .md\:w-2\/4 {
-    width: 50%;
-  }
+    .md\:w-2\/4 {
+        width: 50%;
+    }
 
-  .md\:w-3\/4 {
-    width: 75%;
-  }
+    .md\:w-3\/4 {
+        width: 75%;
+    }
 
-  .md\:w-1\/5 {
-    width: 20%;
-  }
+    .md\:w-1\/5 {
+        width: 20%;
+    }
 
-  .md\:w-2\/5 {
-    width: 40%;
-  }
+    .md\:w-2\/5 {
+        width: 40%;
+    }
 
-  .md\:w-3\/5 {
-    width: 60%;
-  }
+    .md\:w-3\/5 {
+        width: 60%;
+    }
 
-  .md\:w-4\/5 {
-    width: 80%;
-  }
+    .md\:w-4\/5 {
+        width: 80%;
+    }
 
-  .md\:w-1\/6 {
-    width: 16.66667%;
-  }
+    .md\:w-1\/6 {
+        width: 16.66667%;
+    }
 
-  .md\:w-2\/6 {
-    width: 33.33333%;
-  }
+    .md\:w-2\/6 {
+        width: 33.33333%;
+    }
 
-  .md\:w-3\/6 {
-    width: 50%;
-  }
+    .md\:w-3\/6 {
+        width: 50%;
+    }
 
-  .md\:w-4\/6 {
-    width: 66.66667%;
-  }
+    .md\:w-4\/6 {
+        width: 66.66667%;
+    }
 
-  .md\:w-5\/6 {
-    width: 83.33333%;
-  }
+    .md\:w-5\/6 {
+        width: 83.33333%;
+    }
 
-  .md\:w-1\/12 {
-    width: 8.33333%;
-  }
+    .md\:w-1\/12 {
+        width: 8.33333%;
+    }
 
-  .md\:w-2\/12 {
-    width: 16.66667%;
-  }
+    .md\:w-2\/12 {
+        width: 16.66667%;
+    }
 
-  .md\:w-3\/12 {
-    width: 25%;
-  }
+    .md\:w-3\/12 {
+        width: 25%;
+    }
 
-  .md\:w-4\/12 {
-    width: 33.33333%;
-  }
+    .md\:w-4\/12 {
+        width: 33.33333%;
+    }
 
-  .md\:w-5\/12 {
-    width: 41.66667%;
-  }
+    .md\:w-5\/12 {
+        width: 41.66667%;
+    }
 
-  .md\:w-6\/12 {
-    width: 50%;
-  }
+    .md\:w-6\/12 {
+        width: 50%;
+    }
 
-  .md\:w-7\/12 {
-    width: 58.33333%;
-  }
+    .md\:w-7\/12 {
+        width: 58.33333%;
+    }
 
-  .md\:w-8\/12 {
-    width: 66.66667%;
-  }
+    .md\:w-8\/12 {
+        width: 66.66667%;
+    }
 
-  .md\:w-9\/12 {
-    width: 75%;
-  }
+    .md\:w-9\/12 {
+        width: 75%;
+    }
 
-  .md\:w-10\/12 {
-    width: 83.33333%;
-  }
+    .md\:w-10\/12 {
+        width: 83.33333%;
+    }
 
-  .md\:w-11\/12 {
-    width: 91.66667%;
-  }
+    .md\:w-11\/12 {
+        width: 91.66667%;
+    }
 
-  .md\:w-full {
-    width: 100%;
-  }
+    .md\:w-full {
+        width: 100%;
+    }
 }
 
 @media (min-width: 1024px) {
 
-  .lg\:flex-row {
-    flex-direction: row;
-  }
+    .lg\:flex-row {
+        flex-direction: row;
+    }
 
-  .lg\:flex-row-reverse {
-    flex-direction: row-reverse;
-  }
+    .lg\:flex-row-reverse {
+        flex-direction: row-reverse;
+    }
 
-  .lg\:flex-grow-0 {
-    flex-grow: 0;
-  }
+    .lg\:flex-grow-0 {
+        flex-grow: 0;
+    }
 
-  .lg\:flex-grow {
-    flex-grow: 1;
-  }
+    .lg\:flex-grow {
+        flex-grow: 1;
+    }
 
-  .lg\:mx-4 {
-    margin-left: var(--spacing-4);
-    margin-right: var(--spacing-4);
-  }
+    .lg\:mx-4 {
+        margin-left: var(--spacing-4);
+        margin-right: var(--spacing-4);
+    }
 
-  .lg\:w-auto {
-    width: auto;
-  }
+    .lg\:w-auto {
+        width: auto;
+    }
 
-  .lg\:w-1\/2 {
-    width: 50%;
-  }
+    .lg\:w-1\/2 {
+        width: 50%;
+    }
 
-  .lg\:w-1\/3 {
-    width: 33.33333%;
-  }
+    .lg\:w-1\/3 {
+        width: 33.33333%;
+    }
 
-  .lg\:w-2\/3 {
-    width: 66.66667%;
-  }
+    .lg\:w-2\/3 {
+        width: 66.66667%;
+    }
 
-  .lg\:w-1\/4 {
-    width: 25%;
-  }
+    .lg\:w-1\/4 {
+        width: 25%;
+    }
 
-  .lg\:w-2\/4 {
-    width: 50%;
-  }
+    .lg\:w-2\/4 {
+        width: 50%;
+    }
 
-  .lg\:w-3\/4 {
-    width: 75%;
-  }
+    .lg\:w-3\/4 {
+        width: 75%;
+    }
 
-  .lg\:w-1\/5 {
-    width: 20%;
-  }
+    .lg\:w-1\/5 {
+        width: 20%;
+    }
 
-  .lg\:w-2\/5 {
-    width: 40%;
-  }
+    .lg\:w-2\/5 {
+        width: 40%;
+    }
 
-  .lg\:w-3\/5 {
-    width: 60%;
-  }
+    .lg\:w-3\/5 {
+        width: 60%;
+    }
 
-  .lg\:w-4\/5 {
-    width: 80%;
-  }
+    .lg\:w-4\/5 {
+        width: 80%;
+    }
 
-  .lg\:w-1\/6 {
-    width: 16.66667%;
-  }
+    .lg\:w-1\/6 {
+        width: 16.66667%;
+    }
 
-  .lg\:w-2\/6 {
-    width: 33.33333%;
-  }
+    .lg\:w-2\/6 {
+        width: 33.33333%;
+    }
 
-  .lg\:w-3\/6 {
-    width: 50%;
-  }
+    .lg\:w-3\/6 {
+        width: 50%;
+    }
 
-  .lg\:w-4\/6 {
-    width: 66.66667%;
-  }
+    .lg\:w-4\/6 {
+        width: 66.66667%;
+    }
 
-  .lg\:w-5\/6 {
-    width: 83.33333%;
-  }
-
-  .lg\:w-1\/12 {
-    width: 8.33333%;
-  }
-
-  .lg\:w-2\/12 {
-    width: 16.66667%;
-  }
-
-  .lg\:w-3\/12 {
-    width: 25%;
-  }
-
-  .lg\:w-4\/12 {
-    width: 33.33333%;
-  }
+    .lg\:w-5\/6 {
+        width: 83.33333%;
+    }
 
-  .lg\:w-5\/12 {
-    width: 41.66667%;
-  }
+    .lg\:w-1\/12 {
+        width: 8.33333%;
+    }
 
-  .lg\:w-6\/12 {
-    width: 50%;
-  }
+    .lg\:w-2\/12 {
+        width: 16.66667%;
+    }
 
-  .lg\:w-7\/12 {
-    width: 58.33333%;
-  }
+    .lg\:w-3\/12 {
+        width: 25%;
+    }
 
-  .lg\:w-8\/12 {
-    width: 66.66667%;
-  }
+    .lg\:w-4\/12 {
+        width: 33.33333%;
+    }
+
+    .lg\:w-5\/12 {
+        width: 41.66667%;
+    }
+
+    .lg\:w-6\/12 {
+        width: 50%;
+    }
+
+    .lg\:w-7\/12 {
+        width: 58.33333%;
+    }
+
+    .lg\:w-8\/12 {
+        width: 66.66667%;
+    }
+
+    .lg\:w-9\/12 {
+        width: 75%;
+    }
 
-  .lg\:w-9\/12 {
-    width: 75%;
-  }
+    .lg\:w-10\/12 {
+        width: 83.33333%;
+    }
 
-  .lg\:w-10\/12 {
-    width: 83.33333%;
-  }
-
-  .lg\:w-11\/12 {
-    width: 91.66667%;
-  }
+    .lg\:w-11\/12 {
+        width: 91.66667%;
+    }
 
-  .lg\:w-full {
-    width: 100%;
-  }
+    .lg\:w-full {
+        width: 100%;
+    }
 }
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/colors.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/colors.css
index 7a822ca5c..78c956b08 100644
--- a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/colors.css
+++ b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/colors.css
@@ -1,103 +1,94 @@
 /* color vars */
 
 :root {
-  --color-gray-100: #f7fafc;
-  --color-gray-200: #edf2f7;
-  --color-gray-300: #e2e8f0;
-  --color-gray-400: #cbd5e0;
-  --color-gray-500: #a0aec0;
-  --color-gray-600: #718096;
-  --color-gray-700: #4a5568;
-  --color-gray-800: #2d3748;
-  --color-gray-900: #1a202c;
-;
-  --color-red-100: #fff5f5;
-  --color-red-200: #fed7d7;
-  --color-red-300: #feb2b2;
-  --color-red-400: #fc8181;
-  --color-red-500: #f56565;
-  --color-red-600: #e53e3e;
-  --color-red-700: #c53030;
-  --color-red-800: #9b2c2c;
-  --color-red-900: #742a2a;
-;
-  --color-orange-100: #fffaf0;
-  --color-orange-200: #feebc8;
-  --color-orange-300: #fbd38d;
-  --color-orange-400: #f6ad55;
-  --color-orange-500: #ed8936;
-  --color-orange-600: #dd6b20;
-  --color-orange-700: #c05621;
-  --color-orange-800: #9c4221;
-  --color-orange-900: #7b341e;
-;
-  --color-yellow-100: #fffff0;
-  --color-yellow-200: #fefcbf;
-  --color-yellow-300: #faf089;
-  --color-yellow-400: #f6e05e;
-  --color-yellow-500: #ecc94b;
-  --color-yellow-600: #d69e2e;
-  --color-yellow-700: #b7791f;
-  --color-yellow-800: #975a16;
-  --color-yellow-900: #744210;
-;
-  --color-green-100: #f0fff4;
-  --color-green-200: #c6f6d5;
-  --color-green-300: #9ae6b4;
-  --color-green-400: #68d391;
-  --color-green-500: #48bb78;
-  --color-green-600: #38a169;
-  --color-green-700: #2f855a;
-  --color-green-800: #276749;
-  --color-green-900: #22543d;
-;
-  --color-teal-100: #e6fffa;
-  --color-teal-200: #b2f5ea;
-  --color-teal-300: #81e6d9;
-  --color-teal-400: #4fd1c5;
-  --color-teal-500: #38b2ac;
-  --color-teal-600: #319795;
-  --color-teal-700: #2c7a7b;
-  --color-teal-800: #285e61;
-  --color-teal-900: #234e52;
-;
-  --color-blue-100: #ebf8ff;
-  --color-blue-200: #bee3f8;
-  --color-blue-300: #90cdf4;
-  --color-blue-400: #63b3ed;
-  --color-blue-500: #4299e1;
-  --color-blue-600: #3182ce;
-  --color-blue-700: #2b6cb0;
-  --color-blue-800: #2c5282;
-  --color-blue-900: #2a4365;
-;
-  --color-indigo-100: #ebf4ff;
-  --color-indigo-200: #c3dafe;
-  --color-indigo-300: #a3bffa;
-  --color-indigo-400: #7f9cf5;
-  --color-indigo-500: #667eea;
-  --color-indigo-600: #5a67d8;
-  --color-indigo-700: #4c51bf;
-  --color-indigo-800: #434190;
-  --color-indigo-900: #3c366b;
-;
-  --color-purple-100: #faf5ff;
-  --color-purple-200: #e9d8fd;
-  --color-purple-300: #d6bcfa;
-  --color-purple-400: #b794f4;
-  --color-purple-500: #9f7aea;
-  --color-purple-600: #805ad5;
-  --color-purple-700: #6b46c1;
-  --color-purple-800: #553c9a;
-  --color-purple-900: #44337a;
-;
-  --color-pink-100: #fff5f7;
-  --color-pink-200: #fed7e2;
-  --color-pink-300: #fbb6ce;
-  --color-pink-400: #f687b3;
-  --color-pink-500: #ed64a6;
-  --color-pink-600: #d53f8c;
-  --color-pink-700: #b83280;
-  --color-pink-800: #97266d;
-  --color-pink-900: #702459;
+    --color-gray-100: #f7fafc;
+    --color-gray-200: #edf2f7;
+    --color-gray-300: #e2e8f0;
+    --color-gray-400: #cbd5e0;
+    --color-gray-500: #a0aec0;
+    --color-gray-600: #718096;
+    --color-gray-700: #4a5568;
+    --color-gray-800: #2d3748;
+    --color-gray-900: #1a202c;;
+    --color-red-100: #fff5f5;
+    --color-red-200: #fed7d7;
+    --color-red-300: #feb2b2;
+    --color-red-400: #fc8181;
+    --color-red-500: #f56565;
+    --color-red-600: #e53e3e;
+    --color-red-700: #c53030;
+    --color-red-800: #9b2c2c;
+    --color-red-900: #742a2a;;
+    --color-orange-100: #fffaf0;
+    --color-orange-200: #feebc8;
+    --color-orange-300: #fbd38d;
+    --color-orange-400: #f6ad55;
+    --color-orange-500: #ed8936;
+    --color-orange-600: #dd6b20;
+    --color-orange-700: #c05621;
+    --color-orange-800: #9c4221;
+    --color-orange-900: #7b341e;;
+    --color-yellow-100: #fffff0;
+    --color-yellow-200: #fefcbf;
+    --color-yellow-300: #faf089;
+    --color-yellow-400: #f6e05e;
+    --color-yellow-500: #ecc94b;
+    --color-yellow-600: #d69e2e;
+    --color-yellow-700: #b7791f;
+    --color-yellow-800: #975a16;
+    --color-yellow-900: #744210;;
+    --color-green-100: #f0fff4;
+    --color-green-200: #c6f6d5;
+    --color-green-300: #9ae6b4;
+    --color-green-400: #68d391;
+    --color-green-500: #48bb78;
+    --color-green-600: #38a169;
+    --color-green-700: #2f855a;
+    --color-green-800: #276749;
+    --color-green-900: #22543d;;
+    --color-teal-100: #e6fffa;
+    --color-teal-200: #b2f5ea;
+    --color-teal-300: #81e6d9;
+    --color-teal-400: #4fd1c5;
+    --color-teal-500: #38b2ac;
+    --color-teal-600: #319795;
+    --color-teal-700: #2c7a7b;
+    --color-teal-800: #285e61;
+    --color-teal-900: #234e52;;
+    --color-blue-100: #ebf8ff;
+    --color-blue-200: #bee3f8;
+    --color-blue-300: #90cdf4;
+    --color-blue-400: #63b3ed;
+    --color-blue-500: #4299e1;
+    --color-blue-600: #3182ce;
+    --color-blue-700: #2b6cb0;
+    --color-blue-800: #2c5282;
+    --color-blue-900: #2a4365;;
+    --color-indigo-100: #ebf4ff;
+    --color-indigo-200: #c3dafe;
+    --color-indigo-300: #a3bffa;
+    --color-indigo-400: #7f9cf5;
+    --color-indigo-500: #667eea;
+    --color-indigo-600: #5a67d8;
+    --color-indigo-700: #4c51bf;
+    --color-indigo-800: #434190;
+    --color-indigo-900: #3c366b;;
+    --color-purple-100: #faf5ff;
+    --color-purple-200: #e9d8fd;
+    --color-purple-300: #d6bcfa;
+    --color-purple-400: #b794f4;
+    --color-purple-500: #9f7aea;
+    --color-purple-600: #805ad5;
+    --color-purple-700: #6b46c1;
+    --color-purple-800: #553c9a;
+    --color-purple-900: #44337a;;
+    --color-pink-100: #fff5f7;
+    --color-pink-200: #fed7e2;
+    --color-pink-300: #fbb6ce;
+    --color-pink-400: #f687b3;
+    --color-pink-500: #ed64a6;
+    --color-pink-600: #d53f8c;
+    --color-pink-700: #b83280;
+    --color-pink-800: #97266d;
+    --color-pink-900: #702459;
 }
\ No newline at end of file
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/custom.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/custom.css
index 1f987f703..421c525ac 100644
--- a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/custom.css
+++ b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/custom.css
@@ -1,41 +1,41 @@
 :root {
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
-  --font-size-xs: .75rem;
-  --font-size-sm: .875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-5xl: 3rem;
-  --font-size-6xl: 4rem;
-  --line-height-1: 1.5rem;
-  --line-height-2: 1.75rem;
-  --line-height-3: 2.125rem;
-  --line-height-4: 2.5rem;
-  --line-height-5: 3.25rem;
-  --line-height-6: 4.25rem;
+    --font-size-xs: .75rem;
+    --font-size-sm: .875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 3rem;
+    --font-size-6xl: 4rem;
+    --line-height-1: 1.5rem;
+    --line-height-2: 1.75rem;
+    --line-height-3: 2.125rem;
+    --line-height-4: 2.5rem;
+    --line-height-5: 3.25rem;
+    --line-height-6: 4.25rem;
 
-  --spacing-0: 0;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-  --spacing-10: 2.5rem;
-  --spacing-12: 3rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-32: 8rem;
-  --spacing-40: 10rem;
-  --spacing-48: 12rem;
-  --spacing-56: 14rem;
-  --spacing-64: 16rem;
+    --spacing-0: 0;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
+    --spacing-10: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-32: 8rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --spacing-56: 14rem;
+    --spacing-64: 16rem;
 }
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/dependencies/intersection-observer.js b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/dependencies/intersection-observer.js
index 67ba3f80b..f2cdf86c1 100644
--- a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/dependencies/intersection-observer.js
+++ b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/dependencies/intersection-observer.js
@@ -7,735 +7,732 @@
  *
  */
 (function() {
-'use strict';
+    'use strict';
 
 // Exit early if we're not running in a browser.
-if (typeof window !== 'object') {
-  return;
-}
+    if (typeof window !== 'object') {
+        return;
+    }
 
 // Exit early if all IntersectionObserver and IntersectionObserverEntry
 // features are natively supported.
-if ('IntersectionObserver' in window &&
-    'IntersectionObserverEntry' in window &&
-    'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
-
-  // Minimal polyfill for Edge 15's lack of `isIntersecting`
-  // See: https://github.com/w3c/IntersectionObserver/issues/211
-  if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
-    Object.defineProperty(window.IntersectionObserverEntry.prototype,
-      'isIntersecting', {
-      get: function () {
-        return this.intersectionRatio > 0;
-      }
-    });
-  }
-  return;
-}
+    if ('IntersectionObserver' in window &&
+        'IntersectionObserverEntry' in window &&
+        'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
+
+        // Minimal polyfill for Edge 15's lack of `isIntersecting`
+        // See: https://github.com/w3c/IntersectionObserver/issues/211
+        if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
+            Object.defineProperty(window.IntersectionObserverEntry.prototype,
+                'isIntersecting', {
+                    get: function() {
+                        return this.intersectionRatio > 0;
+                    },
+                });
+        }
+        return;
+    }
 
 
-/**
- * A local reference to the document.
- */
-var document = window.document;
+    /**
+     * A local reference to the document.
+     */
+    var document = window.document;
+
+
+    /**
+     * An IntersectionObserver registry. This registry exists to hold a strong
+     * reference to IntersectionObserver instances currently observing a target
+     * element. Without this registry, instances without another reference may be
+     * garbage collected.
+     */
+    var registry = [];
+
+
+    /**
+     * Creates the global IntersectionObserverEntry constructor.
+     * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
+     * @param {Object} entry A dictionary of instance properties.
+     * @constructor
+     */
+    function IntersectionObserverEntry(entry) {
+        this.time = entry.time;
+        this.target = entry.target;
+        this.rootBounds = entry.rootBounds;
+        this.boundingClientRect = entry.boundingClientRect;
+        this.intersectionRect = entry.intersectionRect || getEmptyRect();
+        this.isIntersecting = !!entry.intersectionRect;
+
+        // Calculates the intersection ratio.
+        var targetRect = this.boundingClientRect;
+        var targetArea = targetRect.width * targetRect.height;
+        var intersectionRect = this.intersectionRect;
+        var intersectionArea = intersectionRect.width * intersectionRect.height;
+
+        // Sets intersection ratio.
+        if (targetArea) {
+            // Round the intersection ratio to avoid floating point math issues:
+            // https://github.com/w3c/IntersectionObserver/issues/324
+            this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
+        } else {
+            // If area is zero and is intersecting, sets to 1, otherwise to 0
+            this.intersectionRatio = this.isIntersecting ? 1 : 0;
+        }
+    }
 
 
-/**
- * An IntersectionObserver registry. This registry exists to hold a strong
- * reference to IntersectionObserver instances currently observing a target
- * element. Without this registry, instances without another reference may be
- * garbage collected.
- */
-var registry = [];
+    /**
+     * Creates the global IntersectionObserver constructor.
+     * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
+     * @param {Function} callback The function to be invoked after intersection
+     *     changes have queued. The function is not invoked if the queue has
+     *     been emptied by calling the `takeRecords` method.
+     * @param {Object=} opt_options Optional configuration options.
+     * @constructor
+     */
+    function IntersectionObserver(callback, opt_options) {
+
+        var options = opt_options || {};
+
+        if (typeof callback != 'function') {
+            throw new Error('callback must be a function');
+        }
+
+        if (options.root && options.root.nodeType != 1) {
+            throw new Error('root must be an Element');
+        }
+
+        // Binds and throttles `this._checkForIntersections`.
+        this._checkForIntersections = throttle(
+            this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);
+
+        // Private properties.
+        this._callback = callback;
+        this._observationTargets = [];
+        this._queuedEntries = [];
+        this._rootMarginValues = this._parseRootMargin(options.rootMargin);
+
+        // Public properties.
+        this.thresholds = this._initThresholds(options.threshold);
+        this.root = options.root || null;
+        this.rootMargin = this._rootMarginValues.map(function(margin) {
+            return margin.value + margin.unit;
+        }).join(' ');
+    }
 
 
-/**
- * Creates the global IntersectionObserverEntry constructor.
- * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
- * @param {Object} entry A dictionary of instance properties.
- * @constructor
- */
-function IntersectionObserverEntry(entry) {
-  this.time = entry.time;
-  this.target = entry.target;
-  this.rootBounds = entry.rootBounds;
-  this.boundingClientRect = entry.boundingClientRect;
-  this.intersectionRect = entry.intersectionRect || getEmptyRect();
-  this.isIntersecting = !!entry.intersectionRect;
-
-  // Calculates the intersection ratio.
-  var targetRect = this.boundingClientRect;
-  var targetArea = targetRect.width * targetRect.height;
-  var intersectionRect = this.intersectionRect;
-  var intersectionArea = intersectionRect.width * intersectionRect.height;
-
-  // Sets intersection ratio.
-  if (targetArea) {
-    // Round the intersection ratio to avoid floating point math issues:
-    // https://github.com/w3c/IntersectionObserver/issues/324
-    this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
-  } else {
-    // If area is zero and is intersecting, sets to 1, otherwise to 0
-    this.intersectionRatio = this.isIntersecting ? 1 : 0;
-  }
-}
+    /**
+     * The minimum interval within which the document will be checked for
+     * intersection changes.
+     */
+    IntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;
 
 
-/**
- * Creates the global IntersectionObserver constructor.
- * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
- * @param {Function} callback The function to be invoked after intersection
- *     changes have queued. The function is not invoked if the queue has
- *     been emptied by calling the `takeRecords` method.
- * @param {Object=} opt_options Optional configuration options.
- * @constructor
- */
-function IntersectionObserver(callback, opt_options) {
+    /**
+     * The frequency in which the polyfill polls for intersection changes.
+     * this can be updated on a per instance basis and must be set prior to
+     * calling `observe` on the first target.
+     */
+    IntersectionObserver.prototype.POLL_INTERVAL = null;
 
-  var options = opt_options || {};
+    /**
+     * Use a mutation observer on the root element
+     * to detect intersection changes.
+     */
+    IntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;
 
-  if (typeof callback != 'function') {
-    throw new Error('callback must be a function');
-  }
 
-  if (options.root && options.root.nodeType != 1) {
-    throw new Error('root must be an Element');
-  }
+    /**
+     * Starts observing a target element for intersection changes based on
+     * the thresholds values.
+     * @param {Element} target The DOM element to observe.
+     */
+    IntersectionObserver.prototype.observe = function(target) {
+        var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
+            return item.element == target;
+        });
 
-  // Binds and throttles `this._checkForIntersections`.
-  this._checkForIntersections = throttle(
-      this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);
+        if (isTargetAlreadyObserved) {
+            return;
+        }
 
-  // Private properties.
-  this._callback = callback;
-  this._observationTargets = [];
-  this._queuedEntries = [];
-  this._rootMarginValues = this._parseRootMargin(options.rootMargin);
+        if (!(target && target.nodeType == 1)) {
+            throw new Error('target must be an Element');
+        }
 
-  // Public properties.
-  this.thresholds = this._initThresholds(options.threshold);
-  this.root = options.root || null;
-  this.rootMargin = this._rootMarginValues.map(function(margin) {
-    return margin.value + margin.unit;
-  }).join(' ');
-}
+        this._registerInstance();
+        this._observationTargets.push({ element: target, entry: null });
+        this._monitorIntersections();
+        this._checkForIntersections();
+    };
 
 
-/**
- * The minimum interval within which the document will be checked for
- * intersection changes.
- */
-IntersectionObserver.prototype.THROTTLE_TIMEOUT = 100;
-
+    /**
+     * Stops observing a target element for intersection changes.
+     * @param {Element} target The DOM element to observe.
+     */
+    IntersectionObserver.prototype.unobserve = function(target) {
+        this._observationTargets =
+            this._observationTargets.filter(function(item) {
+
+                return item.element != target;
+            });
+        if (!this._observationTargets.length) {
+            this._unmonitorIntersections();
+            this._unregisterInstance();
+        }
+    };
 
-/**
- * The frequency in which the polyfill polls for intersection changes.
- * this can be updated on a per instance basis and must be set prior to
- * calling `observe` on the first target.
- */
-IntersectionObserver.prototype.POLL_INTERVAL = null;
 
-/**
- * Use a mutation observer on the root element
- * to detect intersection changes.
- */
-IntersectionObserver.prototype.USE_MUTATION_OBSERVER = true;
+    /**
+     * Stops observing all target elements for intersection changes.
+     */
+    IntersectionObserver.prototype.disconnect = function() {
+        this._observationTargets = [];
+        this._unmonitorIntersections();
+        this._unregisterInstance();
+    };
 
 
-/**
- * Starts observing a target element for intersection changes based on
- * the thresholds values.
- * @param {Element} target The DOM element to observe.
- */
-IntersectionObserver.prototype.observe = function(target) {
-  var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
-    return item.element == target;
-  });
+    /**
+     * Returns any queue entries that have not yet been reported to the
+     * callback and clears the queue. This can be used in conjunction with the
+     * callback to obtain the absolute most up-to-date intersection information.
+     * @return {Array} The currently queued entries.
+     */
+    IntersectionObserver.prototype.takeRecords = function() {
+        var records = this._queuedEntries.slice();
+        this._queuedEntries = [];
+        return records;
+    };
 
-  if (isTargetAlreadyObserved) {
-    return;
-  }
 
-  if (!(target && target.nodeType == 1)) {
-    throw new Error('target must be an Element');
-  }
+    /**
+     * Accepts the threshold value from the user configuration object and
+     * returns a sorted array of unique threshold values. If a value is not
+     * between 0 and 1 and error is thrown.
+     * @private
+     * @param {Array|number=} opt_threshold An optional threshold value or
+     *     a list of threshold values, defaulting to [0].
+     * @return {Array} A sorted list of unique and valid threshold values.
+     */
+    IntersectionObserver.prototype._initThresholds = function(opt_threshold) {
+        var threshold = opt_threshold || [0];
+        if (!Array.isArray(threshold)) threshold = [threshold];
+
+        return threshold.sort().filter(function(t, i, a) {
+            if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {
+                throw new Error('threshold must be a number between 0 and 1 inclusively');
+            }
+            return t !== a[i - 1];
+        });
+    };
 
-  this._registerInstance();
-  this._observationTargets.push({element: target, entry: null});
-  this._monitorIntersections();
-  this._checkForIntersections();
-};
 
+    /**
+     * Accepts the rootMargin value from the user configuration object
+     * and returns an array of the four margin values as an object containing
+     * the value and unit properties. If any of the values are not properly
+     * formatted or use a unit other than px or %, and error is thrown.
+     * @private
+     * @param {string=} opt_rootMargin An optional rootMargin value,
+     *     defaulting to '0px'.
+     * @return {Array<Object>} An array of margin objects with the keys
+     *     value and unit.
+     */
+    IntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {
+        var marginString = opt_rootMargin || '0px';
+        var margins = marginString.split(/\s+/).map(function(margin) {
+            var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
+            if (!parts) {
+                throw new Error('rootMargin must be specified in pixels or percent');
+            }
+            return { value: parseFloat(parts[1]), unit: parts[2] };
+        });
 
-/**
- * Stops observing a target element for intersection changes.
- * @param {Element} target The DOM element to observe.
- */
-IntersectionObserver.prototype.unobserve = function(target) {
-  this._observationTargets =
-      this._observationTargets.filter(function(item) {
+        // Handles shorthand.
+        margins[1] = margins[1] || margins[0];
+        margins[2] = margins[2] || margins[0];
+        margins[3] = margins[3] || margins[1];
 
-    return item.element != target;
-  });
-  if (!this._observationTargets.length) {
-    this._unmonitorIntersections();
-    this._unregisterInstance();
-  }
-};
+        return margins;
+    };
 
 
-/**
- * Stops observing all target elements for intersection changes.
- */
-IntersectionObserver.prototype.disconnect = function() {
-  this._observationTargets = [];
-  this._unmonitorIntersections();
-  this._unregisterInstance();
-};
+    /**
+     * Starts polling for intersection changes if the polling is not already
+     * happening, and if the page's visibility state is visible.
+     * @private
+     */
+    IntersectionObserver.prototype._monitorIntersections = function() {
+        if (!this._monitoringIntersections) {
+            this._monitoringIntersections = true;
+
+            // If a poll interval is set, use polling instead of listening to
+            // resize and scroll events or DOM mutations.
+            if (this.POLL_INTERVAL) {
+                this._monitoringInterval = setInterval(
+                    this._checkForIntersections, this.POLL_INTERVAL);
+            } else {
+                addEvent(window, 'resize', this._checkForIntersections, true);
+                addEvent(document, 'scroll', this._checkForIntersections, true);
+
+                if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {
+                    this._domObserver = new MutationObserver(this._checkForIntersections);
+                    this._domObserver.observe(document, {
+                        attributes: true,
+                        childList: true,
+                        characterData: true,
+                        subtree: true,
+                    });
+                }
+            }
+        }
+    };
 
 
-/**
- * Returns any queue entries that have not yet been reported to the
- * callback and clears the queue. This can be used in conjunction with the
- * callback to obtain the absolute most up-to-date intersection information.
- * @return {Array} The currently queued entries.
- */
-IntersectionObserver.prototype.takeRecords = function() {
-  var records = this._queuedEntries.slice();
-  this._queuedEntries = [];
-  return records;
-};
+    /**
+     * Stops polling for intersection changes.
+     * @private
+     */
+    IntersectionObserver.prototype._unmonitorIntersections = function() {
+        if (this._monitoringIntersections) {
+            this._monitoringIntersections = false;
 
+            clearInterval(this._monitoringInterval);
+            this._monitoringInterval = null;
 
-/**
- * Accepts the threshold value from the user configuration object and
- * returns a sorted array of unique threshold values. If a value is not
- * between 0 and 1 and error is thrown.
- * @private
- * @param {Array|number=} opt_threshold An optional threshold value or
- *     a list of threshold values, defaulting to [0].
- * @return {Array} A sorted list of unique and valid threshold values.
- */
-IntersectionObserver.prototype._initThresholds = function(opt_threshold) {
-  var threshold = opt_threshold || [0];
-  if (!Array.isArray(threshold)) threshold = [threshold];
+            removeEvent(window, 'resize', this._checkForIntersections, true);
+            removeEvent(document, 'scroll', this._checkForIntersections, true);
 
-  return threshold.sort().filter(function(t, i, a) {
-    if (typeof t != 'number' || isNaN(t) || t < 0 || t > 1) {
-      throw new Error('threshold must be a number between 0 and 1 inclusively');
-    }
-    return t !== a[i - 1];
-  });
-};
+            if (this._domObserver) {
+                this._domObserver.disconnect();
+                this._domObserver = null;
+            }
+        }
+    };
 
 
-/**
- * Accepts the rootMargin value from the user configuration object
- * and returns an array of the four margin values as an object containing
- * the value and unit properties. If any of the values are not properly
- * formatted or use a unit other than px or %, and error is thrown.
- * @private
- * @param {string=} opt_rootMargin An optional rootMargin value,
- *     defaulting to '0px'.
- * @return {Array<Object>} An array of margin objects with the keys
- *     value and unit.
- */
-IntersectionObserver.prototype._parseRootMargin = function(opt_rootMargin) {
-  var marginString = opt_rootMargin || '0px';
-  var margins = marginString.split(/\s+/).map(function(margin) {
-    var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
-    if (!parts) {
-      throw new Error('rootMargin must be specified in pixels or percent');
-    }
-    return {value: parseFloat(parts[1]), unit: parts[2]};
-  });
+    /**
+     * Scans each observation target for intersection changes and adds them
+     * to the internal entries queue. If new entries are found, it
+     * schedules the callback to be invoked.
+     * @private
+     */
+    IntersectionObserver.prototype._checkForIntersections = function() {
+        var rootIsInDom = this._rootIsInDom();
+        var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
+
+        this._observationTargets.forEach(function(item) {
+            var target = item.element;
+            var targetRect = getBoundingClientRect(target);
+            var rootContainsTarget = this._rootContainsTarget(target);
+            var oldEntry = item.entry;
+            var intersectionRect = rootIsInDom && rootContainsTarget &&
+                this._computeTargetAndRootIntersection(target, rootRect);
+
+            var newEntry = item.entry = new IntersectionObserverEntry({
+                time: now(),
+                target: target,
+                boundingClientRect: targetRect,
+                rootBounds: rootRect,
+                intersectionRect: intersectionRect,
+            });
+
+            if (!oldEntry) {
+                this._queuedEntries.push(newEntry);
+            } else if (rootIsInDom && rootContainsTarget) {
+                // If the new entry intersection ratio has crossed any of the
+                // thresholds, add a new entry.
+                if (this._hasCrossedThreshold(oldEntry, newEntry)) {
+                    this._queuedEntries.push(newEntry);
+                }
+            } else {
+                // If the root is not in the DOM or target is not contained within
+                // root but the previous entry for this target had an intersection,
+                // add a new record indicating removal.
+                if (oldEntry && oldEntry.isIntersecting) {
+                    this._queuedEntries.push(newEntry);
+                }
+            }
+        }, this);
+
+        if (this._queuedEntries.length) {
+            this._callback(this.takeRecords(), this);
+        }
+    };
 
-  // Handles shorthand.
-  margins[1] = margins[1] || margins[0];
-  margins[2] = margins[2] || margins[0];
-  margins[3] = margins[3] || margins[1];
 
-  return margins;
-};
+    /**
+     * Accepts a target and root rect computes the intersection between then
+     * following the algorithm in the spec.
+     * TODO(philipwalton): at this time clip-path is not considered.
+     * https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
+     * @param {Element} target The target DOM element
+     * @param {Object} rootRect The bounding rect of the root after being
+     *     expanded by the rootMargin value.
+     * @return {?Object} The final intersection rect object or undefined if no
+     *     intersection is found.
+     * @private
+     */
+    IntersectionObserver.prototype._computeTargetAndRootIntersection =
+        function(target, rootRect) {
+
+            // If the element isn't displayed, an intersection can't happen.
+            if (window.getComputedStyle(target).display == 'none') return;
+
+            var targetRect = getBoundingClientRect(target);
+            var intersectionRect = targetRect;
+            var parent = getParentNode(target);
+            var atRoot = false;
+
+            while (!atRoot) {
+                var parentRect = null;
+                var parentComputedStyle = parent.nodeType == 1 ?
+                    window.getComputedStyle(parent) : {};
+
+                // If the parent isn't displayed, an intersection can't happen.
+                if (parentComputedStyle.display == 'none') return;
+
+                if (parent == this.root || parent == document) {
+                    atRoot = true;
+                    parentRect = rootRect;
+                } else {
+                    // If the element has a non-visible overflow, and it's not the <body>
+                    // or <html> element, update the intersection rect.
+                    // Note: <body> and <html> cannot be clipped to a rect that's not also
+                    // the document rect, so no need to compute a new intersection.
+                    if (parent != document.body &&
+                        parent != document.documentElement &&
+                        parentComputedStyle.overflow != 'visible') {
+                        parentRect = getBoundingClientRect(parent);
+                    }
+                }
+
+                // If either of the above conditionals set a new parentRect,
+                // calculate new intersection data.
+                if (parentRect) {
+                    intersectionRect = computeRectIntersection(parentRect, intersectionRect);
+
+                    if (!intersectionRect) break;
+                }
+                parent = getParentNode(parent);
+            }
+            return intersectionRect;
+        };
+
+
+    /**
+     * Returns the root rect after being expanded by the rootMargin value.
+     * @return {Object} The expanded root rect.
+     * @private
+     */
+    IntersectionObserver.prototype._getRootRect = function() {
+        var rootRect;
+        if (this.root) {
+            rootRect = getBoundingClientRect(this.root);
+        } else {
+            // Use <html>/<body> instead of window since scroll bars affect size.
+            var html = document.documentElement;
+            var body = document.body;
+            rootRect = {
+                top: 0,
+                left: 0,
+                right: html.clientWidth || body.clientWidth,
+                width: html.clientWidth || body.clientWidth,
+                bottom: html.clientHeight || body.clientHeight,
+                height: html.clientHeight || body.clientHeight,
+            };
+        }
+        return this._expandRectByRootMargin(rootRect);
+    };
 
 
-/**
- * Starts polling for intersection changes if the polling is not already
- * happening, and if the page's visibility state is visible.
- * @private
- */
-IntersectionObserver.prototype._monitorIntersections = function() {
-  if (!this._monitoringIntersections) {
-    this._monitoringIntersections = true;
-
-    // If a poll interval is set, use polling instead of listening to
-    // resize and scroll events or DOM mutations.
-    if (this.POLL_INTERVAL) {
-      this._monitoringInterval = setInterval(
-          this._checkForIntersections, this.POLL_INTERVAL);
-    }
-    else {
-      addEvent(window, 'resize', this._checkForIntersections, true);
-      addEvent(document, 'scroll', this._checkForIntersections, true);
-
-      if (this.USE_MUTATION_OBSERVER && 'MutationObserver' in window) {
-        this._domObserver = new MutationObserver(this._checkForIntersections);
-        this._domObserver.observe(document, {
-          attributes: true,
-          childList: true,
-          characterData: true,
-          subtree: true
+    /**
+     * Accepts a rect and expands it by the rootMargin value.
+     * @param {Object} rect The rect object to expand.
+     * @return {Object} The expanded rect.
+     * @private
+     */
+    IntersectionObserver.prototype._expandRectByRootMargin = function(rect) {
+        var margins = this._rootMarginValues.map(function(margin, i) {
+            return margin.unit == 'px' ? margin.value :
+                margin.value * (i % 2 ? rect.width : rect.height) / 100;
         });
-      }
-    }
-  }
-};
+        var newRect = {
+            top: rect.top - margins[0],
+            right: rect.right + margins[1],
+            bottom: rect.bottom + margins[2],
+            left: rect.left - margins[3],
+        };
+        newRect.width = newRect.right - newRect.left;
+        newRect.height = newRect.bottom - newRect.top;
+
+        return newRect;
+    };
 
 
-/**
- * Stops polling for intersection changes.
- * @private
- */
-IntersectionObserver.prototype._unmonitorIntersections = function() {
-  if (this._monitoringIntersections) {
-    this._monitoringIntersections = false;
+    /**
+     * Accepts an old and new entry and returns true if at least one of the
+     * threshold values has been crossed.
+     * @param {?IntersectionObserverEntry} oldEntry The previous entry for a
+     *    particular target element or null if no previous entry exists.
+     * @param {IntersectionObserverEntry} newEntry The current entry for a
+     *    particular target element.
+     * @return {boolean} Returns true if a any threshold has been crossed.
+     * @private
+     */
+    IntersectionObserver.prototype._hasCrossedThreshold =
+        function(oldEntry, newEntry) {
+
+            // To make comparing easier, an entry that has a ratio of 0
+            // but does not actually intersect is given a value of -1
+            var oldRatio = oldEntry && oldEntry.isIntersecting ?
+                oldEntry.intersectionRatio || 0 : -1;
+            var newRatio = newEntry.isIntersecting ?
+                newEntry.intersectionRatio || 0 : -1;
+
+            // Ignore unchanged ratios
+            if (oldRatio === newRatio) return;
+
+            for (var i = 0; i < this.thresholds.length; i++) {
+                var threshold = this.thresholds[i];
+
+                // Return true if an entry matches a threshold or if the new ratio
+                // and the old ratio are on the opposite sides of a threshold.
+                if (threshold == oldRatio || threshold == newRatio ||
+                    threshold < oldRatio !== threshold < newRatio) {
+                    return true;
+                }
+            }
+        };
+
+
+    /**
+     * Returns whether or not the root element is an element and is in the DOM.
+     * @return {boolean} True if the root element is an element and is in the DOM.
+     * @private
+     */
+    IntersectionObserver.prototype._rootIsInDom = function() {
+        return !this.root || containsDeep(document, this.root);
+    };
 
-    clearInterval(this._monitoringInterval);
-    this._monitoringInterval = null;
 
-    removeEvent(window, 'resize', this._checkForIntersections, true);
-    removeEvent(document, 'scroll', this._checkForIntersections, true);
+    /**
+     * Returns whether or not the target element is a child of root.
+     * @param {Element} target The target element to check.
+     * @return {boolean} True if the target element is a child of root.
+     * @private
+     */
+    IntersectionObserver.prototype._rootContainsTarget = function(target) {
+        return containsDeep(this.root || document, target);
+    };
 
-    if (this._domObserver) {
-      this._domObserver.disconnect();
-      this._domObserver = null;
-    }
-  }
-};
 
+    /**
+     * Adds the instance to the global IntersectionObserver registry if it isn't
+     * already present.
+     * @private
+     */
+    IntersectionObserver.prototype._registerInstance = function() {
+        if (registry.indexOf(this) < 0) {
+            registry.push(this);
+        }
+    };
 
-/**
- * Scans each observation target for intersection changes and adds them
- * to the internal entries queue. If new entries are found, it
- * schedules the callback to be invoked.
- * @private
- */
-IntersectionObserver.prototype._checkForIntersections = function() {
-  var rootIsInDom = this._rootIsInDom();
-  var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
-
-  this._observationTargets.forEach(function(item) {
-    var target = item.element;
-    var targetRect = getBoundingClientRect(target);
-    var rootContainsTarget = this._rootContainsTarget(target);
-    var oldEntry = item.entry;
-    var intersectionRect = rootIsInDom && rootContainsTarget &&
-        this._computeTargetAndRootIntersection(target, rootRect);
-
-    var newEntry = item.entry = new IntersectionObserverEntry({
-      time: now(),
-      target: target,
-      boundingClientRect: targetRect,
-      rootBounds: rootRect,
-      intersectionRect: intersectionRect
-    });
-
-    if (!oldEntry) {
-      this._queuedEntries.push(newEntry);
-    } else if (rootIsInDom && rootContainsTarget) {
-      // If the new entry intersection ratio has crossed any of the
-      // thresholds, add a new entry.
-      if (this._hasCrossedThreshold(oldEntry, newEntry)) {
-        this._queuedEntries.push(newEntry);
-      }
-    } else {
-      // If the root is not in the DOM or target is not contained within
-      // root but the previous entry for this target had an intersection,
-      // add a new record indicating removal.
-      if (oldEntry && oldEntry.isIntersecting) {
-        this._queuedEntries.push(newEntry);
-      }
-    }
-  }, this);
 
-  if (this._queuedEntries.length) {
-    this._callback(this.takeRecords(), this);
-  }
-};
+    /**
+     * Removes the instance from the global IntersectionObserver registry.
+     * @private
+     */
+    IntersectionObserver.prototype._unregisterInstance = function() {
+        var index = registry.indexOf(this);
+        if (index != -1) registry.splice(index, 1);
+    };
 
 
-/**
- * Accepts a target and root rect computes the intersection between then
- * following the algorithm in the spec.
- * TODO(philipwalton): at this time clip-path is not considered.
- * https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo
- * @param {Element} target The target DOM element
- * @param {Object} rootRect The bounding rect of the root after being
- *     expanded by the rootMargin value.
- * @return {?Object} The final intersection rect object or undefined if no
- *     intersection is found.
- * @private
- */
-IntersectionObserver.prototype._computeTargetAndRootIntersection =
-    function(target, rootRect) {
-
-  // If the element isn't displayed, an intersection can't happen.
-  if (window.getComputedStyle(target).display == 'none') return;
-
-  var targetRect = getBoundingClientRect(target);
-  var intersectionRect = targetRect;
-  var parent = getParentNode(target);
-  var atRoot = false;
-
-  while (!atRoot) {
-    var parentRect = null;
-    var parentComputedStyle = parent.nodeType == 1 ?
-        window.getComputedStyle(parent) : {};
-
-    // If the parent isn't displayed, an intersection can't happen.
-    if (parentComputedStyle.display == 'none') return;
-
-    if (parent == this.root || parent == document) {
-      atRoot = true;
-      parentRect = rootRect;
-    } else {
-      // If the element has a non-visible overflow, and it's not the <body>
-      // or <html> element, update the intersection rect.
-      // Note: <body> and <html> cannot be clipped to a rect that's not also
-      // the document rect, so no need to compute a new intersection.
-      if (parent != document.body &&
-          parent != document.documentElement &&
-          parentComputedStyle.overflow != 'visible') {
-        parentRect = getBoundingClientRect(parent);
-      }
+    /**
+     * Returns the result of the performance.now() method or null in browsers
+     * that don't support the API.
+     * @return {number} The elapsed time since the page was requested.
+     */
+    function now() {
+        return window.performance && performance.now && performance.now();
     }
 
-    // If either of the above conditionals set a new parentRect,
-    // calculate new intersection data.
-    if (parentRect) {
-      intersectionRect = computeRectIntersection(parentRect, intersectionRect);
 
-      if (!intersectionRect) break;
+    /**
+     * Throttles a function and delays its execution, so it's only called at most
+     * once within a given time period.
+     * @param {Function} fn The function to throttle.
+     * @param {number} timeout The amount of time that must pass before the
+     *     function can be called again.
+     * @return {Function} The throttled function.
+     */
+    function throttle(fn, timeout) {
+        var timer = null;
+        return function() {
+            if (!timer) {
+                timer = setTimeout(function() {
+                    fn();
+                    timer = null;
+                }, timeout);
+            }
+        };
     }
-    parent = getParentNode(parent);
-  }
-  return intersectionRect;
-};
-
-
-/**
- * Returns the root rect after being expanded by the rootMargin value.
- * @return {Object} The expanded root rect.
- * @private
- */
-IntersectionObserver.prototype._getRootRect = function() {
-  var rootRect;
-  if (this.root) {
-    rootRect = getBoundingClientRect(this.root);
-  } else {
-    // Use <html>/<body> instead of window since scroll bars affect size.
-    var html = document.documentElement;
-    var body = document.body;
-    rootRect = {
-      top: 0,
-      left: 0,
-      right: html.clientWidth || body.clientWidth,
-      width: html.clientWidth || body.clientWidth,
-      bottom: html.clientHeight || body.clientHeight,
-      height: html.clientHeight || body.clientHeight
-    };
-  }
-  return this._expandRectByRootMargin(rootRect);
-};
 
 
-/**
- * Accepts a rect and expands it by the rootMargin value.
- * @param {Object} rect The rect object to expand.
- * @return {Object} The expanded rect.
- * @private
- */
-IntersectionObserver.prototype._expandRectByRootMargin = function(rect) {
-  var margins = this._rootMarginValues.map(function(margin, i) {
-    return margin.unit == 'px' ? margin.value :
-        margin.value * (i % 2 ? rect.width : rect.height) / 100;
-  });
-  var newRect = {
-    top: rect.top - margins[0],
-    right: rect.right + margins[1],
-    bottom: rect.bottom + margins[2],
-    left: rect.left - margins[3]
-  };
-  newRect.width = newRect.right - newRect.left;
-  newRect.height = newRect.bottom - newRect.top;
-
-  return newRect;
-};
-
-
-/**
- * Accepts an old and new entry and returns true if at least one of the
- * threshold values has been crossed.
- * @param {?IntersectionObserverEntry} oldEntry The previous entry for a
- *    particular target element or null if no previous entry exists.
- * @param {IntersectionObserverEntry} newEntry The current entry for a
- *    particular target element.
- * @return {boolean} Returns true if a any threshold has been crossed.
- * @private
- */
-IntersectionObserver.prototype._hasCrossedThreshold =
-    function(oldEntry, newEntry) {
-
-  // To make comparing easier, an entry that has a ratio of 0
-  // but does not actually intersect is given a value of -1
-  var oldRatio = oldEntry && oldEntry.isIntersecting ?
-      oldEntry.intersectionRatio || 0 : -1;
-  var newRatio = newEntry.isIntersecting ?
-      newEntry.intersectionRatio || 0 : -1;
-
-  // Ignore unchanged ratios
-  if (oldRatio === newRatio) return;
-
-  for (var i = 0; i < this.thresholds.length; i++) {
-    var threshold = this.thresholds[i];
-
-    // Return true if an entry matches a threshold or if the new ratio
-    // and the old ratio are on the opposite sides of a threshold.
-    if (threshold == oldRatio || threshold == newRatio ||
-        threshold < oldRatio !== threshold < newRatio) {
-      return true;
+    /**
+     * Adds an event handler to a DOM node ensuring cross-browser compatibility.
+     * @param {Node} node The DOM node to add the event handler to.
+     * @param {string} event The event name.
+     * @param {Function} fn The event handler to add.
+     * @param {boolean} opt_useCapture Optionally adds the even to the capture
+     *     phase. Note: this only works in modern browsers.
+     */
+    function addEvent(node, event, fn, opt_useCapture) {
+        if (typeof node.addEventListener == 'function') {
+            node.addEventListener(event, fn, opt_useCapture || false);
+        } else if (typeof node.attachEvent == 'function') {
+            node.attachEvent('on' + event, fn);
+        }
     }
-  }
-};
-
-
-/**
- * Returns whether or not the root element is an element and is in the DOM.
- * @return {boolean} True if the root element is an element and is in the DOM.
- * @private
- */
-IntersectionObserver.prototype._rootIsInDom = function() {
-  return !this.root || containsDeep(document, this.root);
-};
-
-
-/**
- * Returns whether or not the target element is a child of root.
- * @param {Element} target The target element to check.
- * @return {boolean} True if the target element is a child of root.
- * @private
- */
-IntersectionObserver.prototype._rootContainsTarget = function(target) {
-  return containsDeep(this.root || document, target);
-};
-
-
-/**
- * Adds the instance to the global IntersectionObserver registry if it isn't
- * already present.
- * @private
- */
-IntersectionObserver.prototype._registerInstance = function() {
-  if (registry.indexOf(this) < 0) {
-    registry.push(this);
-  }
-};
-
-
-/**
- * Removes the instance from the global IntersectionObserver registry.
- * @private
- */
-IntersectionObserver.prototype._unregisterInstance = function() {
-  var index = registry.indexOf(this);
-  if (index != -1) registry.splice(index, 1);
-};
-
 
-/**
- * Returns the result of the performance.now() method or null in browsers
- * that don't support the API.
- * @return {number} The elapsed time since the page was requested.
- */
-function now() {
-  return window.performance && performance.now && performance.now();
-}
 
-
-/**
- * Throttles a function and delays its execution, so it's only called at most
- * once within a given time period.
- * @param {Function} fn The function to throttle.
- * @param {number} timeout The amount of time that must pass before the
- *     function can be called again.
- * @return {Function} The throttled function.
- */
-function throttle(fn, timeout) {
-  var timer = null;
-  return function () {
-    if (!timer) {
-      timer = setTimeout(function() {
-        fn();
-        timer = null;
-      }, timeout);
+    /**
+     * Removes a previously added event handler from a DOM node.
+     * @param {Node} node The DOM node to remove the event handler from.
+     * @param {string} event The event name.
+     * @param {Function} fn The event handler to remove.
+     * @param {boolean} opt_useCapture If the event handler was added with this
+     *     flag set to true, it should be set to true here in order to remove it.
+     */
+    function removeEvent(node, event, fn, opt_useCapture) {
+        if (typeof node.removeEventListener == 'function') {
+            node.removeEventListener(event, fn, opt_useCapture || false);
+        } else if (typeof node.detatchEvent == 'function') {
+            node.detatchEvent('on' + event, fn);
+        }
     }
-  };
-}
-
 
-/**
- * Adds an event handler to a DOM node ensuring cross-browser compatibility.
- * @param {Node} node The DOM node to add the event handler to.
- * @param {string} event The event name.
- * @param {Function} fn The event handler to add.
- * @param {boolean} opt_useCapture Optionally adds the even to the capture
- *     phase. Note: this only works in modern browsers.
- */
-function addEvent(node, event, fn, opt_useCapture) {
-  if (typeof node.addEventListener == 'function') {
-    node.addEventListener(event, fn, opt_useCapture || false);
-  }
-  else if (typeof node.attachEvent == 'function') {
-    node.attachEvent('on' + event, fn);
-  }
-}
-
-
-/**
- * Removes a previously added event handler from a DOM node.
- * @param {Node} node The DOM node to remove the event handler from.
- * @param {string} event The event name.
- * @param {Function} fn The event handler to remove.
- * @param {boolean} opt_useCapture If the event handler was added with this
- *     flag set to true, it should be set to true here in order to remove it.
- */
-function removeEvent(node, event, fn, opt_useCapture) {
-  if (typeof node.removeEventListener == 'function') {
-    node.removeEventListener(event, fn, opt_useCapture || false);
-  }
-  else if (typeof node.detatchEvent == 'function') {
-    node.detatchEvent('on' + event, fn);
-  }
-}
-
-
-/**
- * Returns the intersection between two rect objects.
- * @param {Object} rect1 The first rect.
- * @param {Object} rect2 The second rect.
- * @return {?Object} The intersection rect or undefined if no intersection
- *     is found.
- */
-function computeRectIntersection(rect1, rect2) {
-  var top = Math.max(rect1.top, rect2.top);
-  var bottom = Math.min(rect1.bottom, rect2.bottom);
-  var left = Math.max(rect1.left, rect2.left);
-  var right = Math.min(rect1.right, rect2.right);
-  var width = right - left;
-  var height = bottom - top;
-
-  return (width >= 0 && height >= 0) && {
-    top: top,
-    bottom: bottom,
-    left: left,
-    right: right,
-    width: width,
-    height: height
-  };
-}
 
+    /**
+     * Returns the intersection between two rect objects.
+     * @param {Object} rect1 The first rect.
+     * @param {Object} rect2 The second rect.
+     * @return {?Object} The intersection rect or undefined if no intersection
+     *     is found.
+     */
+    function computeRectIntersection(rect1, rect2) {
+        var top = Math.max(rect1.top, rect2.top);
+        var bottom = Math.min(rect1.bottom, rect2.bottom);
+        var left = Math.max(rect1.left, rect2.left);
+        var right = Math.min(rect1.right, rect2.right);
+        var width = right - left;
+        var height = bottom - top;
+
+        return (width >= 0 && height >= 0) && {
+            top: top,
+            bottom: bottom,
+            left: left,
+            right: right,
+            width: width,
+            height: height,
+        };
+    }
 
-/**
- * Shims the native getBoundingClientRect for compatibility with older IE.
- * @param {Element} el The element whose bounding rect to get.
- * @return {Object} The (possibly shimmed) rect of the element.
- */
-function getBoundingClientRect(el) {
-  var rect;
-
-  try {
-    rect = el.getBoundingClientRect();
-  } catch (err) {
-    // Ignore Windows 7 IE11 "Unspecified error"
-    // https://github.com/w3c/IntersectionObserver/pull/205
-  }
-
-  if (!rect) return getEmptyRect();
-
-  // Older IE
-  if (!(rect.width && rect.height)) {
-    rect = {
-      top: rect.top,
-      right: rect.right,
-      bottom: rect.bottom,
-      left: rect.left,
-      width: rect.right - rect.left,
-      height: rect.bottom - rect.top
-    };
-  }
-  return rect;
-}
 
+    /**
+     * Shims the native getBoundingClientRect for compatibility with older IE.
+     * @param {Element} el The element whose bounding rect to get.
+     * @return {Object} The (possibly shimmed) rect of the element.
+     */
+    function getBoundingClientRect(el) {
+        var rect;
+
+        try {
+            rect = el.getBoundingClientRect();
+        } catch (err) {
+            // Ignore Windows 7 IE11 "Unspecified error"
+            // https://github.com/w3c/IntersectionObserver/pull/205
+        }
+
+        if (!rect) return getEmptyRect();
+
+        // Older IE
+        if (!(rect.width && rect.height)) {
+            rect = {
+                top: rect.top,
+                right: rect.right,
+                bottom: rect.bottom,
+                left: rect.left,
+                width: rect.right - rect.left,
+                height: rect.bottom - rect.top,
+            };
+        }
+        return rect;
+    }
 
-/**
- * Returns an empty rect object. An empty rect is returned when an element
- * is not in the DOM.
- * @return {Object} The empty rect.
- */
-function getEmptyRect() {
-  return {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    width: 0,
-    height: 0
-  };
-}
 
-/**
- * Checks to see if a parent element contains a child element (including inside
- * shadow DOM).
- * @param {Node} parent The parent element.
- * @param {Node} child The child element.
- * @return {boolean} True if the parent node contains the child node.
- */
-function containsDeep(parent, child) {
-  var node = child;
-  while (node) {
-    if (node == parent) return true;
+    /**
+     * Returns an empty rect object. An empty rect is returned when an element
+     * is not in the DOM.
+     * @return {Object} The empty rect.
+     */
+    function getEmptyRect() {
+        return {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            width: 0,
+            height: 0,
+        };
+    }
 
-    node = getParentNode(node);
-  }
-  return false;
-}
+    /**
+     * Checks to see if a parent element contains a child element (including inside
+     * shadow DOM).
+     * @param {Node} parent The parent element.
+     * @param {Node} child The child element.
+     * @return {boolean} True if the parent node contains the child node.
+     */
+    function containsDeep(parent, child) {
+        var node = child;
+        while (node) {
+            if (node == parent) return true;
+
+            node = getParentNode(node);
+        }
+        return false;
+    }
 
 
-/**
- * Gets the parent node of an element or its host element if the parent node
- * is a shadow root.
- * @param {Node} node The node whose parent to get.
- * @return {Node|null} The parent node or null if no parent exists.
- */
-function getParentNode(node) {
-  var parent = node.parentNode;
+    /**
+     * Gets the parent node of an element or its host element if the parent node
+     * is a shadow root.
+     * @param {Node} node The node whose parent to get.
+     * @return {Node|null} The parent node or null if no parent exists.
+     */
+    function getParentNode(node) {
+        var parent = node.parentNode;
 
-  if (parent && parent.nodeType == 11 && parent.host) {
-    // If the parent is a shadow root, return the host element.
-    return parent.host;
-  }
+        if (parent && parent.nodeType == 11 && parent.host) {
+            // If the parent is a shadow root, return the host element.
+            return parent.host;
+        }
 
-  if (parent && parent.assignedSlot) {
-    // If the parent is distributed in a <slot>, return the parent of a slot.
-    return parent.assignedSlot.parentNode;
-  }
+        if (parent && parent.assignedSlot) {
+            // If the parent is distributed in a <slot>, return the parent of a slot.
+            return parent.assignedSlot.parentNode;
+        }
 
-  return parent;
-}
+        return parent;
+    }
 
 
 // Exposes the constructors globally.
-window.IntersectionObserver = IntersectionObserver;
-window.IntersectionObserverEntry = IntersectionObserverEntry;
+    window.IntersectionObserver = IntersectionObserver;
+    window.IntersectionObserverEntry = IntersectionObserverEntry;
 
 }());
diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/styles.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/styles.css
index d4fb44fb0..f40f627cc 100644
--- a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/styles.css
+++ b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/styles.css
@@ -1,4 +1,5 @@
 @import './custom.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -9,109 +10,108 @@
 /* Base Overrides */
 
 html {
-  @apply font-sans text-base;
+    @apply font-sans text-base;
 }
 
 .enlarge-text h1:not([class]),
 .enlarge-text .text-5xl,
 .text-6xl {
-  @apply text-6xl font-extrabold;
-  line-height: var(--line-height-6);
-  letter-spacing: -0.02em;
+    @apply text-6xl font-extrabold;
+    line-height: var(--line-height-6);
+    letter-spacing: -0.02em;
 }
 
 .enlarge-text h1:not([class]),
 .enlarge-text .text-5xl:not([class*=my-]):not([class*=mt-]),
 .text-6xl {
-  margin-top: var(--spacing-24);
+    margin-top: var(--spacing-24);
 }
 
 h1:not([class]),
 .enlarge-text h2:not([class]),
 .text-5xl {
-  @apply text-5xl font-extrabold;
-  line-height: var(--line-height-5);
-  letter-spacing: -0.02em;
+    @apply text-5xl font-extrabold;
+    line-height: var(--line-height-5);
+    letter-spacing: -0.02em;
 }
 
 h1:not([class]),
 .enlarge-text h2:not([class]) {
-  margin-top: var(--spacing-20);
+    margin-top: var(--spacing-20);
 }
 
 h2:not([class]),
 .enlarge-text h3:not([class]),
 .text-4xl {
-  @apply text-4xl font-bold;
-  line-height: var(--line-height-4);
-  letter-spacing: -0.04em;
+    @apply text-4xl font-bold;
+    line-height: var(--line-height-4);
+    letter-spacing: -0.04em;
 }
 
 h2:not([class]),
 .enlarge-text h3:not([class]) {
-  margin-top: var(--spacing-16);
+    margin-top: var(--spacing-16);
 }
 
 h3:not([class]),
 .enlarge-text h4:not([class]),
 .text-3xl {
-  @apply text-3xl font-bold;
-  line-height: var(--line-height-3);
-  letter-spacing: -0.02em;
+    @apply text-3xl font-bold;
+    line-height: var(--line-height-3);
+    letter-spacing: -0.02em;
 }
 
 
-
 h3:not([class]),
 .enlarge-text h4:not([class]) {
-  margin-top: var(--spacing-12);
+    margin-top: var(--spacing-12);
 }
 
 h4:not([class]),
 .enlarge-text h5:not([class]),
 .text-2xl {
-  @apply text-2xl font-bold;
-  line-height: var(--line-height-2);
-  letter-spacing: -0.02em;
+    @apply text-2xl font-bold;
+    line-height: var(--line-height-2);
+    letter-spacing: -0.02em;
 }
 
 h4:not([class]),
 .enlarge-text h5:not([class]) {
-  margin-top: var(--spacing-10);
+    margin-top: var(--spacing-10);
 }
 
 h5:not([class]),
 .enlarge-text h6:not([class]),
 .text-xl {
-  @apply text-xl font-bold;
-  line-height: var(--line-height-1);
+    @apply text-xl font-bold;
+    line-height: var(--line-height-1);
 }
 
 h5:not([class]),
 .enlarge-text h6:not([class]) {
-  margin-top: var(--spacing-8);
+    margin-top: var(--spacing-8);
 }
 
 h6:not([class]) {
-  @apply text-lg;
-  line-height: var(--line-height-1);
-  margin-top: var(--spacing-8);
-  margin-bottom: 0;
+    @apply text-lg;
+    line-height: var(--line-height-1);
+    margin-top: var(--spacing-8);
+    margin-bottom: 0;
 }
 
 .enlarge-text p:not([class*=text-]),
 .enlarge-text .text-lg {
-  @apply text-xl;
-  line-height: var(--line-height-2);
+    @apply text-xl;
+    line-height: var(--line-height-2);
 }
 
 h6 {
-  @apply font-bold;
+    @apply font-bold;
 }
 
 h1:not([class]), h2:not([class]), h3:not([class]), h4:not([class]), h5:not([class]) {
-  margin-top: var(--spacing-6);
-  margin-bottom: var(--spacing-6);
+    margin-top: var(--spacing-6);
+    margin-bottom: var(--spacing-6);
 }
 
 h1:not([class]):first-child,
@@ -120,7 +120,7 @@ h3:not([class]):first-child,
 h4:not([class]):first-child,
 h5:not([class]):first-child,
 h6:not([class]):first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 
 h1:not([class]):last-child,
@@ -129,7 +129,7 @@ h3:not([class]):last-child,
 h4:not([class]):last-child,
 h5:not([class]):last-child,
 h6:not([class]):last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .text-xl.font-normal,
@@ -138,190 +138,219 @@ h6:not([class]):last-child {
 .text-4xl.font-normal,
 .text-5xl.font-normal,
 .text-6xl.font-normal {
-  font-weight: 400;
+    font-weight: 400;
 }
 
 a {
-  @apply underline text-blue-700;
+    @apply underline text-blue-700;
 }
+
 a:hover {
-  @apply text-blue-800;
+    @apply text-blue-800;
 }
 
 ul {
-  @apply list-disc pl-5 py-2 m-0;
+    @apply list-disc pl-5 py-2 m-0;
 }
 
 ol {
-  @apply list-decimal pl-5 py-2 m-0;
+    @apply list-decimal pl-5 py-2 m-0;
 }
 
 p {
-  @apply my-3;
-  line-height: var(--line-height-1);
+    @apply my-3;
+    line-height: var(--line-height-1);
 }
 
 .color-inherit {
-  color: inherit;
+    color: inherit;
 }
 
 .pipe-after:after {
-  content: "|";
-  @apply ml-2;
+    content: "|";
+    @apply ml-2;
 }
 
 /* Custom Utilities */
 .transform-rotate-90 {
-  transform: rotate(90deg);
+    transform: rotate(90deg);
 }
 
 /* Drop Shadow Helpers */
 .elevation-1 {
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
+
 .elevation-2 {
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
+
 .elevation-3 {
-  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
+
 .elevation-4 {
-  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
+
 .elevation-5 {
-  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-  transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
-  z-index: 10;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
+    transition: box-shadow 0.3s cubic-bezier(.25, .8, .25, 1);
+    z-index: 10;
 }
 
 /* Background */
 
 .bg-primary {
-  background: var(--bg-primary);
+    background: var(--bg-primary);
 }
 
 .bg-secondary {
-  background: var(--bg-secondary);
+    background: var(--bg-secondary);
 }
 
 /* Buttons */
 .btn {
-  @apply text-sm font-medium py-2 px-4 rounded no-underline;
-  transition-property: background, background-color, color, border-color;
-  transition-duration: 0.2s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    @apply text-sm font-medium py-2 px-4 rounded no-underline;
+    transition-property: background, background-color, color, border-color;
+    transition-duration: 0.2s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .btn:focus {
-  @apply outline-none shadow-outline;
+    @apply outline-none shadow-outline;
 }
+
 .btn:hover {
-  @apply text-white;
+    @apply text-white;
 }
 
 .btn-lg {
-  @apply py-4 px-5 text-lg
+    @apply py-4 px-5 text-lg
 }
+
 .btn-sm {
-  @apply py-2 px-2 text-sm
+    @apply py-2 px-2 text-sm
 }
+
 .btn-blue {
-  @apply bg-blue-600 text-white;
+    @apply bg-blue-600 text-white;
 }
+
 .btn-blue:hover {
-  @apply bg-blue-700;
+    @apply bg-blue-700;
 }
+
 .btn-green {
-  @apply bg-green-600 text-white;
+    @apply bg-green-600 text-white;
 }
+
 .btn-green:hover {
-  @apply bg-green-700;
+    @apply bg-green-700;
 }
+
 .btn-red {
-  @apply bg-red-600 text-white;
+    @apply bg-red-600 text-white;
 }
+
 .btn-red:hover {
-  @apply bg-red-700;
+    @apply bg-red-700;
 }
+
 .btn-orange {
-  @apply bg-orange-600 text-white;
+    @apply bg-orange-600 text-white;
 }
+
 .btn-orange:hover {
-  @apply bg-orange-700;
+    @apply bg-orange-700;
 }
+
 .btn-white {
-  @apply bg-gray-200 text-gray-800;
+    @apply bg-gray-200 text-gray-800;
 }
+
 .btn-white:hover {
-  @apply bg-gray-300;
+    @apply bg-gray-300;
 }
+
 .btn-black {
-  @apply bg-gray-800 text-gray-200;
+    @apply bg-gray-800 text-gray-200;
 }
+
 .btn-black:hover {
-  @apply bg-gray-900;
+    @apply bg-gray-900;
 }
 
 .media-sizeable {
-  flex-shrink: 1 !important;
+    flex-shrink: 1 !important;
 }
-@media (min-width: 768px){
-  .media-sizeable {
-    flex-shrink: 0 !important;
-  }
+
+@media (min-width: 768px) {
+    .media-sizeable {
+        flex-shrink: 0 !important;
+    }
 }
 
 
 /* header */
 [class$="components-header"] a {
-  @apply text-sm font-medium;
+    @apply text-sm font-medium;
 }
 
 /* footer */
 [class$="components-footer"] ul {
-  @apply list-none p-0 text-sm font-medium;
+    @apply list-none p-0 text-sm font-medium;
 }
+
 [class$="components-footer"] ul li {
-  @apply mb-2;
+    @apply mb-2;
 }
+
 [class$="components-footer"] p {
-  @apply text-sm font-medium;
+    @apply text-sm font-medium;
 }
 
 /* carousel */
 [class$="components-carousel"].w-full {
-  padding-left: 0;
-  padding-right: 0;
+    padding-left: 0;
+    padding-right: 0;
 }
+
 .VueCarousel-pagination {
-  @apply absolute bottom-0 mb-4 pointer-events-none;
+    @apply absolute bottom-0 mb-4 pointer-events-none;
 }
+
 .VueCarousel-dot-container {
-  @apply pointer-events-auto;
+    @apply pointer-events-auto;
 }
 
 /* accordion */
 [class$="components-accordion"] .img-wrapper.rounded-none img {
-  border-radius: 0; 
+    border-radius: 0;
 }
+
 [class$="components-accordion"] .img-wrapper.rounded-sm img {
-  border-radius: 0.125rem;
+    border-radius: 0.125rem;
 }
+
 [class$="components-accordion"] .img-wrapper.rounded img {
-  border-radius: 0.25rem;
+    border-radius: 0.25rem;
 }
+
 [class$="components-accordion"] .img-wrapper.rounded-lg img {
-  border-radius: 0.5rem;
+    border-radius: 0.5rem;
 }
+
 [class$="components-accordion"] .img-wrapper.rounded-full img {
-  border-radius: 9999px;
+    border-radius: 9999px;
 }